早上好,我在使用 slideToggle 的正确箭头开关时遇到了问题。我有 3 个,但箭头只在第一个发生变化——即使我点击不同的 div。有什么我忽略的想法吗?谢谢
//jquery
$(document).ready(function(){
$('.flip').click(function(){
$(this).next('.panel').slideToggle('fast');
var src = $('#arrow').attr('src') == "arrow-down.png" ? "arrow-up.png" : "arrow-down.png";
$('#arrow').attr('src', src);
});
});
//html
<div id="container">
<div class="flip">One <img id="arrow" src="arrow-down.png" alt="" /></div>
<div class="panel">
<p>Foo</p>
</div>
</div>
<div id="container">
<div class="flip">Two <img id="arrow" src="arrow-down.png" alt="" /></div>
<div class="panel">
<p>Bar</p>
</div>
</div>
<div id="container">
<div class="flip">Xxx <img id="arrow" src="arrow-down.png" alt="" /></div>
<div class="panel">
<p>Yyy</p>
</div>
最佳答案
您指向的是全局 $('#arrow')
而不是相关的 .flip
.
我是这样解决的:
$(this).find('#arrow').attr('src', src);
我更新了你的 jsFiddle…
http://jsfiddle.net/8y6xb9n5/1/
……但是你的代码还是有点乱。你不应该声明 id="arrow"
不止一次。改用类。
此外,将 src 与三元指令进行比较看起来有点笨重。这里也使用类( .addClass()
, .removeClass()
)和 background-image
.
一般来说,<img>
用于内容(如照片),而 css 的背景用于界面(如图标)。
关于jQuery slideToggle "arrow"改变每个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26955538/