Question

我有一个网站，它使用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”类是辅助图像

Answer 1

你可以用jQuery做到这一点。

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

每个产品的className为“product”，所有帮助图像的className为“helper-image”。

只要您在产品上进行操作并隐藏所有帮助图像，此功能就会触发。

Answer 2

使用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"）都会淡出并删除。

Answer 3

每当你发现自己使用“某种类型的所有元素都做某事”之类的短语时，你应该考虑课程。类允许您使用指定的关键字选择多个元素。 jQuery允许您轻松修改属于某个类的所有元素。

由于拖动事件会冒泡，因此在文档级别监听它们将允许您捕获任何拖动事件。

以下代码可以帮助您：

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

我使用了来自here和here

的信息

需要Javascript onmousedown来触发多个图像才能显示任何内容

3 个答案: