Html 切换特定div并更改img jquery

我对此列表的切换有问题：

<div id="list">

    <div id="segment">      // <--- when clicked, toggle segm_content and opener
          <div id="opener">
              <img src="images/open.png" />   // changes when toggled
          </div>
          <div id="segm_content">
              // content to hide/show
          </div>
    </div>

    <div id="segment">      // <--- when clicked, toggle segm_content and opener
          <div id="opener">
              <img src="images/open.png" />   // changes when toggled
          </div>
          <div id="segm_content">
              // content to hide/show
          </div>
    </div>

    ... //and so on

</div>

//我真的不推荐这个。
id
的要点是引用唯一的元素。如果要选择多个元素，应该定义一个
类
，并让jQuery调用它。多个
id
s是无效的HTML。但是，按照sé的说法，您可以通过将jQuery代码更改为以下代码来实现这一点

（这是我的jsFiddle:）

$（'[id=“segment”]'）。切换(
函数（）{
$（this.find（'[id=“opener”]'））.html（''；
$（this）.find（'[id=“segm_content”]'）.hide（500）；
},
函数（）{
$（this.find（'[id=“opener”]'））.html（''；
$（this.find（'[id=“segm_content”]'）.show（500）；
}
);​

让我再次强调，这是一个坏主意，因为您的文档中没有唯一的
id
选择器。这真是糟糕的做法。有时，您需要在DOM中选择一个单独的元素，这几乎是不可能的。我强烈建议您为元素定义一个
类
（您仍然可以定义CSS
类
es，例如
或
）

（另外，这段代码还有一个有用的提示：不要用jQuery代码中的相同图像填充HTML元素[这是多余的]，而是将
元素保留为空。然后，在定义
toggle
函数后，立即运行
click
事件，如下所示：
$（'[id=“$segment”]）。toggle（…）。click（）；
).
常规主题设置
背景色
文本颜色
$（“.SettingsTitle”）。单击（函数（e）{
var appThemePath=$（“#appThemePath”）.text（）

}))
 我认为这是因为有多个
元素具有相同的
id
。jQuery将选择与给定选择器匹配的所有项目，即使选择器是
id
（我认为）。谢谢您的建议。我试图将
id更改为
#name_number
，但是有没有办法在html中设置变量，然后将其传递到这个脚本中？像
onclick=“toggle#me（'segment'、'opener'、'segm#content'）；”
。我不知道如何在jquery脚本中成功处理此数据：(
$('#segment').toggle(function() {
    $('#opener').html('<img src="images/open.png"/>');
    $('#segm_content').hide(500);
}, function() {
    $('#opener').html('<img src="images/close.png"/>');
    $('#segm_content').show(500);
});

$('[id="segment"]').toggle(
 function(){
  $(this).find('[id="opener"]').html('<img src="open.png" alt="Close" />');
  $(this).find('[id="segm_content"]').hide(500);
 },
 function(){
  $(this).find('[id="opener"]').html('<img src="close.png" alt="Open" />');
  $(this).find('[id="segm_content"]').show(500);
 }
);​

          <div class="Settings" id="GTSettings">
            <h3 class="SettingsTitle"><a class="toggle" ><img src="${appThemePath}/images/toggle-collapse-light.gif" alt="" /></a>Content Theme Settings</h3>
            <div class="options">
                <table>
                    <tr>
                        <td><h4>Back-Ground Color</h4></td>
                        <td><input type="text" id="body-backGroundColor" class="themeselector" readonly="readonly"></td>
                    </tr>
                    <tr>
                        <td><h4>Text Color</h4></td>
                        <td><input type="text" id="body-fontColor" class="themeselector" readonly="readonly"></td>
                    </tr>
                </table>
            </div>
        </div>

 $(".options").hide();

                var closeMenuImg = appThemePath+'/images/toggle-collapse-light.gif';
                var openMenuImg = appThemePath+'/images/toggle-collapse-dark.gif';

                var elem = $(this).next('.options');
                $('.options').not(elem).hide('fast');
                $('.SettingsTitle').not($(this)).parent().children("h3").children("a.toggle").children("img").attr('src', closeMenuImg);
                elem.toggle('fast');
                var targetImg  =  $(this).parent().children("h3").children("a.toggle").children("img").attr('src') === closeMenuImg ?  openMenuImg :  closeMenuImg;
                $(this).parent().children("h3").children("a.toggle").children("img").attr('src', targetImg);


            });