切换特定的 div 并更改 img jquery答案

【问题标题】：Toggle specific div and change img jquery切换特定的 div 并更改 img jquery
【发布时间】：2012-06-27 11:40:56
【问题描述】：

我在此列表上的切换有问题：

<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"* 并更改 "#opener" 中的 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" 执行此操作。
这段代码切换了我不想要的一切。

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

【问题讨论】：

我认为这是因为您有多个具有相同id 的<div /> 元素。 jQuery 将选择与给定选择器匹配的所有项目，即使选择器是id（我认为）。
感谢您的建议。我试图将<div> id 更改为#name_number，但是有没有办法可以在 html 中设置变量，然后将其传递给这个脚本？喜欢onclick="toggle_me('#segment', '#opener', '#segm_content');"。我不知道如何在 jquery 脚本中成功处理这些数据:(

标签： html toggle switch-statement image selected

【解决方案1】：

我真的不推荐这个。 id 的意义在于引用一个独特的元素。如果你想选择多个元素，你应该定义一个 class 并让 jQuery 调用它。多个 ids 是无效的 HTML。但是您可以，就其本身而言，通过将 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 classes，例如 <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/)。

【讨论】：

【解决方案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>

$(document).ready(function(){

 $(".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);


            });

});

【讨论】：