jQuery slideToggle "arrow"改变每个 div

Question

早上好，我在使用 slideToggle 的正确箭头开关时遇到了问题。我有 3 个，但箭头只在第一个发生变化——即使我点击不同的 div。有什么我忽略的想法吗？谢谢

demo here

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

Answer 1

您指向的是全局 $('#arrow')而不是相关的 .flip .我是这样解决的:

$(this).find('#arrow').attr('src', src);

我更新了你的 jsFiddle…

http://jsfiddle.net/8y6xb9n5/1/

……但是你的代码还是有点乱。你不应该声明 id="arrow"不止一次。改用类。此外，将 src 与三元指令进行比较看起来有点笨重。这里也使用类( .addClass() ， .removeClass() )和 background-image .

一般来说，<img>用于内容(如照片)，而 css 的背景用于界面(如图标)。