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元素。所以在这种情况下，将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();
})

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

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

Answer 2

根据您的评论理解，您只想显示已点击图片的说明。这是我的解决方案

{  
   "_id":"5a8b2953007a1922f00124fd",
   "one_id":"307973260186877954",
   "two_id":"415228402765660181"
}
{  
   "_id":"5a8b29a3007a1922f00124fe",
   "one_id":"415228402765660181",
   "two_id":"307973260186877954"
}
{  
   "_id":"5a8c33132a182308a836bc1c",
   "one_id":"307973260186877954",
   "two_id":"397036401075552256"
}
{  
   "_id":"5a8c33242a182308a836bc1d",
   "one_id":"397036401075552256",
   "two_id":"307973260186877954"
}

https://jsfiddle.net/rtsj6r41/

另外请注意你的jquery版本，因为自3.0以来不推荐使用unbind（）

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

点击另一个元素时无法隐藏其他元素

3 个答案: