Question

您好我正在尝试显示/隐藏具有与其他人相同的ID或类的特定元素。

<span id="showimg">Zobrazit přílohu</span>
<span id="hideimg">Skrýt přílohu</span>
<div class="images-con">
</div>

<span id="showimg">Zobrazit přílohu</span>
<span id="hideimg">Skrýt přílohu</span>
<div class="images-con">
</div>

所以当我点击第一个按钮时，id = showimg将显示第一个div，但不会显示两个。任何想法我应该如何解决我的问题？

Answer 1

想象一下，两个或两个以上具有相同社会安全号码的人......这将是一团糟，不会吗？！这同样适用于 ID →它必须是每页唯一。

使用课程。或者甚至更好地使用data-*属性来引用所需的目标，如：

＆＃13;

var $toggle    = $("[data-toggle]");    // Collect all buttons
var $togglable = $("[data-togglable]"); // Collect all containers
var btnText = ["↑ Skrýt přílohu","↓ Zobrazit přílohu"];


$toggle.on("click", function(){ // The toggle buttons...

  // Get my data value
  var data =  this.dataset.toggle;
  // I should target the container which data value matches mine
  var $target = $("[data-togglable='"+ data +"']");
  // Now let's handle the buttons texts:
  // Show the opening text to all buttons (I'll handle my-self soon)
  $toggle.not( this ).text( btnText[1] );
  // Toggle my text
  $("[data-toggle='"+ data +"']").text( btnText[+$target.is(":visible")] );
  

  // Hide all opened containers (ignore my target container, I'll handle him soon)
  $togglable.not( $target ).stop().slideUp();
  // Toggle my target container
  $target.stop().slideToggle();
  
});

＆＃13;

/* BUTTONS */
a[data-toggle] {
  border-top: 1px solid #444;
  display: block;
  padding: 8px 16px; 
  background: #0bf;
  color: #fff;
  cursor: pointer;
}

a[data-toggle] .hideimg{
  display: none; /* hide "Skrýt přílohu" initially */
}

/* CONTENTS */
.images-con{
  display:none; /* hide all DIVs initially */
  padding: 8px 16px; 
  background: #bf0
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a data-toggle="div1">&darr; Zobrazit přílohu</a>
<div data-togglable="div1" class="images-con">Hi! I'm div1</div>


<a data-toggle="div2">&darr; Zobrazit přílohu</a>
<div data-togglable="div2" class="images-con">Hello♪ It's me...</div>

＆＃13;

Answer 2

如果您正在使用JQuery，请为每个按钮分配相同的类并尝试：

$(".whateveryourclass").click(function() {

    $(this).toggle();

});

Answer 3

所以最后我做到了。我将showimg / hideimg从id更改为class。这解决了我的问题。

$(".showimg").click(function(){
    $(this).parents(".images-gallery").find("div.images-con").show()
    $(this).parents(".images-gallery").find(".hideimg").show()
    $(this).parents(".images-gallery").find(".showimg").hide()
});

$(".hideimg").click(function(){
    $(this).parents(".images-gallery").find("div.images-con").hide()
    $(this).parents(".images-gallery").find(".showimg").show()
    $(this).parents(".images-gallery").find(".hideimg").hide()
});

Jquery显示或隐藏特定元素

3 个答案: