Need Javascript onmousedown to trigger multiple images to display none

Question

I have a website that uses a PHP foreach loop to gather products from a database. Each of those products displays the product picture and then has a jQuery plugin that allows the user to swipe or click and drag the element to the left to display more information about the product. I have included a helper image to notify the users that they can slide/swipe over the product image. After the use has swiped with a touchscreen or clicked and dragged with their mouse I want all the helper images to display none. I don't know much javascript yet, but I was thinking that this would need to be accomplished with 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>";
        }

the class "swipe-image" is the helper image

Answer 1

You can do this with jQuery.

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

Where each product has a className of "product" and all helper images have a className of "helper-image".

This function triggers whenever you mousedown on a product and hides all helper images.

Answer 2

With jQuery, you can make something like this:

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

So let's say each of your product images has class="productDrag". Then, when the mouse is pressed down on top of one of them, all of your helper images (which I've given class="helper") are faded out and removed.

Answer 3

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