jquery显示或隐藏特定元素

-2

你好，我想显示/隐藏像其他人一样的id或类的特定元素。jquery显示或隐藏特定元素

<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将显示，但不是他们两个。任何想法我应该如何解决我的问题？

来源

2017-03-09 Jakub Staněk

那么解决任何问题的第一步就是试图在求助之前自己解决它。 – Santi

我知道如何隐藏/显示div。但如何显示第一个或第二个div？不是在同一时间 –

那么，作为一个正确方向的推动，元素ID *必须是**独特的***。但是你应该对'$（this）'做一些研究，它只会影响被点击的元素。 – Santi

如果你正在使用JQuery，分配每个按钮的同一类和尝试这个办法：

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

    $(this).toggle(); 

});

来源

2017-03-09 23:04:55 James

@Santi好点 - 我做了改变。我通常会同意你的意见，即不应该回答，除非我真的不知道OP是否尝试过。看起来他/她的英语不是最好的，他们对S/O来说是新的，所以这是一个简单的答案，我想我会帮忙的。 – James

我明白你发布了什么，但它其实不是我要找的内容。我需要的东西，如果我点击例如第一个#showimg它会显示第一个div，当我点击第二个同样会发生，但与第二个div。我希望你能理解我 –

@JakubStaněk但是你怎么知道哪个'showimg''显示？你应该猜测应用程序的体系结构。有些东西听起来不对。 – James

想象一下两个或两个以上的人具有相同的社会安全号码......这将是一个烂摊子，止跌” ？它？！这同样适用于ID → 它必须是每页独特的。

使用类。甚至更好地利用data-*属性引用一个期望的目标，如：

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

/* 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 
 
}

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

来源

2017-03-10 00:38:21

所以最后我做到了。我将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() 
});

来源

2017-03-11 00:12:11

您提供的问题代码中的“images-gallery”在哪里？ –

jquery显示或隐藏特定元素

回答

相关问题