0

このリストのトグルに問題があります:

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

しかし、一度に 1 つの「#segment」に対してのみ行う方法がわかりません。
このコードはすべてを切り替えますが、これは望ましくありません。

この時点で立ち往生しています。何か提案をお願いします。
どうもありがとう!

4

2 に答える 2

0

私は本当にこれをお勧めしません。のポイントはid、一意の要素を参照することです。複数の要素を選択する場合は、class代わりにを定義し、jQueryにそれを呼び出させる必要があります。複数idのsは無効な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要素のaを定義することを強くお勧めします(CSS classes、たとえば<div class="opener my-class" />またはを定義することもできます<div class="segm_content my-class" />)。

(また、このコードの役立つヒント:jQueryコード(冗長)にもある同じ画像をHTML要素に入力するのではなく、要素を空のままにします。次に、関数<div id="opener" />を定義した直後に、イベントを実行します。 、そのように:http: //jsfiddle.net/XPXBv/)。toggleclick$('[id="$segment"]').toggle(...).click();

于 2012-07-03T15:26:16.423 に答える
0
テーマの一般設定 背景色 文字色
          <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);


            });

});

于 2014-06-02T06:46:16.373 に答える