-2

我有一个使用 PHP foreach 循环从数据库中收集产品的网站。这些产品中的每一个都显示产品图片，然后有一个 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();
});

每个产品都有一个“产品”的类名，所有帮助图像都有一个“帮助图像”的类名。

每当您在产品上按下鼠标并隐藏所有帮助图像时，此功能都会触发。

于 2013-08-01T20:30:18.983 回答
0

Whenever you find yourself using a phrase like "all elements of a certain type do something", you should think classes. Classes allow you to select multiple elements using a keyword that you assign. jQuery allows you to easily modify all elements that belong to a certain class.

Because drag events bubble up, listening for them at the document level will allow you to capture any drag event.

The following code should help you out:

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

I used information from here and here

于 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 回答