Javascript Can'；不要在单击其他元素时隐藏其他元素

我试图做一个切换，但我点击的每个元素都会创建一个由这些元素组成的堆栈。相反，我试图隐藏所有内容，只显示我单击的元素。现在我只能在单击同一元素两次时隐藏它，这不是我想要的。我想单击其中一个并隐藏以前显示的内容

.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");

    });
  })
})

---

可以使用jQuery将事件处理程序一次附加到一组DOM元素。因此，在这种情况下，将vanilla 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();
})

---

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

根据我对您的评论的理解，您希望只显示已单击图像的描述。 这是我的解决办法

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

---

另外，请注意您的jquery版本，因为unbind（）自3.0以来已不推荐使用。您可以使用事件委派，以便只向映像的父映像添加一次事件处理程序。这通常是保持浏览器工作状态的最佳方法。添加和删除类对于显示和隐藏来说是一种干净的方法，因为您可以通过查看html以及其他好处（例如可以轻松使用.hasClass（）检查项目是否可见）来查看正在发生的事情

jsfiddle：

示例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>

示例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");
}

---

如果您使用的是jQuery，为什么要使用

document.getElementsByClassName（“totalpoll-choice-image-2”）

和

document.getElementById（id）

？@j08691起初都是普通代码，后来我改成了jQuery，所以我可能就是这样放弃的。这有区别吗？我不能在jquery中加入一些香草吗？我的意思是它通常在jQuery中工作，您不想/不需要在循环中附加事件处理程序。@Mikey

。totalpoll-choice-image-2

是一组必须始终显示的图像。它们是用户单击以在每个图像下显示隐藏描述的内容。当我单击“.totalpoll-choice-image-2”时，就会显示该描述。该类共有5张图片。在我单击的下一个图像中，我想隐藏上一个描述框。“事件侦听器在没有循环的数组上不工作”否，但

jQuery（.totalpoll-choice-image-2”）。取消绑定（'click'）。单击（函数（e）

将一次绑定到所有对象（尽管您应该使用.off（），因为.unbind（）已被弃用）不需要循环。您的示例非常有效。我遇到的唯一问题是，即使

.totalpoll-choice-image-2

包装了img标记，我仍然无法单击img，事件处理程序什么也不做，我需要在img外部单击一点，但仍然在

内部。totalpoll-choice-image-2

让事件处理程序工作。有什么想法吗为什么会发生这种情况？事件目标会不同。单击事件将“冒泡”到包装器类并执行处理程序，但事件目标

e.target

会不同（它将是图像而不是包装器）-因此它找不到ID。您可以通过将数据ID移动到图像本身来解决这一问题。

$(".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");
}