单击其他元素时无法隐藏其他元素

Question

我正在尝试进行切换，但我单击的每个元素都会创建这些显示元素的堆栈。相反，我试图隐藏所有内容，只显示我单击的元素。现在，我只能在同一元素上单击两次才能隐藏它，这不是我想要的。我想点击一个并隐藏之前显示的内容。

.totalpoll-choice-image-2是一堆总是需要显示的图像。它们是用户单击以在每个图像下显示隐藏描述的内容。当我点击.totalpoll-choice-image-2时，这个描述就会显示出来。这个类有5张图片。在我点击的下一张图片中，我想隐藏之前的描述框。

我的代码：

jQuery(document).ready(function() {
  var element = document.getElementsByClassName("totalpoll-choice-image-2");
  var elements = Array.prototype.slice.call(Array.from( element ) );
  console.log(elements);
  jQuery(element).each(function(item) {
    jQuery(this).unbind('click').click(function(e) {
      e.stopPropagation();
      var id = jQuery(this).attr("data-id");
      console.log(this);
      //jQuery("#" + id).css({"display": 'block !important'});
      //document.getElementById(id).style.setProperty( 'display', 'block', 'important' );

      var descriptionContainer = document.getElementById(id);

      var thiss = jQuery(this);
      console.log(thiss);
      console.log(jQuery(descriptionContainer).not(thiss).hide());
      jQuery(descriptionContainer).toggleClass("show");

    });
  })
})

Answer 1

您可以使用jQuery一次将事件处理程序附加到一组DOM元素。因此，在这种情况下，将普通JS与jQuery混合使用不会给您带来任何好处--尽管这是可能的。

我拼凑了一个小例子来说明你想要什么。脚本本身非常简单(如下所示)。类和ID是不同的，但概念应该是相同的：

// Assign click handlers to all items at once
$('.img').click(function(e){
  // Turn off all the texts
  $('.stuff').hide();
  // Show the one you want
  $('#' + $(e.target).data('id')).show();
})

https://codepen.io/meltingchocolate/pen/NyzKMp

您可能还注意到，我使用.data() method从data-id属性中提取了ID，并使用.click() method附加了事件侦听器。这是跨一组jQuery对象应用事件处理程序的典型方式。

Answer 2

根据我的理解，根据你的评论，你只想显示已经被点击的图像的描述。以下是我的解决方案

$('.container').on('click', 'img', function() {
 $(this).closest('.container').find('.image-description').addClass('hidden');
 $(this).siblings('p').removeClass('hidden');
});

https://jsfiddle.net/rtsj6r41/

另外，请注意您的jquery版本，因为unbind()从3.0开始就被弃用了

Answer 3

您可以使用事件委托，以便只向图像的父级添加一次事件处理程序。这通常是保持浏览器必须完成的工作的最好方法。添加和删除类是一种清晰的显示和隐藏方法，因为您可以通过查看html以及其他好处(如使用.hasClass()轻松检查项是否可见)来查看发生了什么。

jsfiddle：https://jsfiddle.net/0yL5zuab/17/

示例HTML

< div class="main" >
    <div class="image-parent">
        <div class="image">
        </div>
        <div class="image-descr">
            Some text. Some text. Some text.
        </div>
    </div>
    <div class="image-parent">
        <div class="image">
        </div>
        <div class="image-descr">
            Some text. Some text. Some text.
        </div>
    </div>
    <div class="image-parent">
        <div class="image">
        </div>
        <div class="image-descr">
            Some text. Some text. Some text.
        </div>
    </div>
    <div class="clear">

    </div>
</div>

示例CSS

.image-parent{
    height: 100px;
    width: 200px;
    float: left;
    margin: 5px;
}

.image-parent .image{
    background: blue;
    height: 50%;
    width: 100%;
}

.image-descr{
    display: none;
    height: 50%;
    width: 100%;
}

.show-descr{
    display: block;
}

.clear{
    clear: both;
}

示例JQUERY

$(".main").on("click", ".image-parent", ShowDescription);

function ShowDescription(e) {
    var $parent = $(e.target).parent(".image-parent");
    var $desc = $parent.find(".image-descr");

    $(".image-descr").removeClass("show-descr");
    $desc.addClass("show-descr");
}