-2

PHP foreach ループを使用してデータベースから製品を収集する Web サイトがあります。これらの各製品には製品の写真が表示され、ユーザーが要素を左にスワイプまたはクリック アンド ドラッグして製品に関する詳細情報を表示できるようにする jQuery プラグインがあります。製品画像をスライド/スワイプできることをユーザーに通知するヘルパー画像を含めました。使用者がタッチスクリーンでスワイプするか、マウスでクリックしてドラッグした後、すべてのヘルパー画像に何も表示しないようにします。私はまだJavaScriptをあまり知りませんが、これはonmousedownで達成する必要があると思っていましたか?

foreach($result as $row)  
        {   
          $ProductID = $row['ProductID'];
          $Brand = $row['Brand'];
          $Name = $row['Name'];
          $Image = $row['Image'];
          $Price = $row['Price'];
          $ArticleID = $row['ArticleID'];
          $VideoID = $row['VideoID'];

          echo "<li class='mix $Brand'>";
          echo "<div class='touchslider'>";
          echo "<div class='touchslider-viewport'>";
          echo "<div class='touchslider-div'>";
          echo "<div class='touchslider-item'>";
          echo "<h1>" . $Brand . " " . $Name . "</h1>";
          echo "<img class='image-swipe' src='img/swipe.png' alt='Swipe to the Left Indicator'/>";
          echo "<img id='brewer-imgs' height='330' src='img/products/" . $Image . "' alt='" . $Brand . " " . $Name . " Image'/></a>";

          echo "</div>";
          echo "<div class='touchslider-item' id='inside-slide'>";
          echo "<p><em>" . $Brand . " " . $Name . "</em></p></br>";
          echo "<p>Lowest Price $" . $Price . "</p></br>";
        }

クラス「swipe-image」はヘルパー画像です

4

3 に答える 3

1

これは jQuery で行うことができます。

$("#products-container").on('mousedown', '.product', function () {
  $(".helper-image").hide();
});

各製品の className は「product」で、すべてのヘルパー イメージの className は「helper-image」です。

この関数は、製品をマウスダウンするとトリガーされ、すべてのヘルパー画像が非表示になります。

于 2013-08-01T20:30:18.983 に答える
0

「特定のタイプのすべての要素が何かをする」などのフレーズを使用していることに気付いたときはいつでも、クラスを考える必要があります。クラスを使用すると、割り当てたキーワードを使用して複数の要素を選択できます。jQuery を使用すると、特定のクラスに属するすべての要素を簡単に変更できます。

ドラッグ イベントはバブルアップするため、ドキュメント レベルでドラッグ イベントをリッスンすると、あらゆるドラッグ イベントをキャプチャできます。

次のコードが役に立ちます。

document.ondragstart = function() {
    $(".className").css('display', 'none'); //Set all of the elements to display none
}

こことここの情報を使用しました

于 2013-08-01T20:26:10.107 に答える
0

jQuery を使用すると、次のようなものを作成できます。

$(document).ready(function() {
    $("body").on("mousedown.help", ".productDrag", function() {
        $(".helper").each(function() {
            $(this).fadeOut(400, function() {
                $(this).empty().remove();
            });
        });
        $("body").off("mousedown.help");
    });
});

では、各商品画像にclass="productDrag". 次に、それらのいずれかの上でマウスを押すと、すべてのヘルパー画像 (私が指定class="helper"したもの) がフェードアウトして削除されます。

于 2013-08-01T20:24:41.193 に答える