Question

我在此列表上切换时遇到问题：

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

我想点击“＃segment”来切换子*“＃segm_content”*并更改“#openner”中的img 。

我使用了这段代码：

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

但我无法弄清楚如何只为一个“＃segment”做一次。
这段代码切换了我不想要的一切。

我被困在这一点上，有什么建议吗？非常感谢！

Answer 1

我真的不推荐这个。 id的要点是引用一个唯一元素。如果要选择多个元素，则应该定义class并调用jQuery。多个id是无效的HTML。但是，可以，根据sé，通过将jQuery代码更改为以下内容来实现此目的。

（这是我的jsFiddle：http://jsfiddle.net/KzVmK/）

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

再一次，让我再次强调这是一个坏主意，因为您的文档中不会有唯一的id选择器。这真的是不好的做法。有时候你会想要在DOM中选择一个单独的元素，这将使下一个元素成为不可能。我强烈建议您为元素定义class（您仍然可以定义CSS class es，例如<div class="opener my-class" />或<div class="segm_content my-class" />。

（另外，这段代码的一个有用提示：不是用jQuery代码中的相同图像填充HTML元素[这是多余的]，而是将<div id="opener" />元素留空。然后，紧接着您定义toggle函数，运行click事件，如下所示：$('[id="$segment"]').toggle(...).click(); http://jsfiddle.net/XPXBv/）。

Answer 2

一般主题设置背景颜色文字颜色

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

$（“。SettingsTitle”）。click（function（e）{ var appThemePath = $（“＃appThemePath”）。text（）;

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


            });

}）;

切换特定div并更改图像jquery

2 个答案: