0

以下のように、順序付けられていないリストに表示される製品のリストがあります。

ユーザーがアイテムに興味を持っているときはいつでも、[私は興味があります] をクリックし、興味のあるアイテムの目盛りとともに背景色を変更します。

目盛りを表示するために、興味のあるときに呼び出されるjquery関数を使用しました

ダニを表示するために、関数に次の行を追加しました

<pre>                   $(this).parent().children(1).children(0).children(0).children(0).children(0).children(0).show();
</pre>

jquery関数全体は以下の通りです

<pre>
$(".checklist .checkbox-select").click(
  function(event) {         $(this).parent().children(1).children(0).children(0).children(0).children(0).children(0).show());           
}
);
</pre>

目盛りのあるDivの表示をなしからブロックに変更しています

すべての子ノードを通過してティック画像を持つ div に到達するよりも、DOM をナビゲートするためのより良い方法があるかどうかを知りたい

<pre>
    <li>
        <div style="padding:10px 0px 0px 10px;">
         <table>
          <tr>
            <td>
              <div class="TickImgCont" style="display:none;">
            <img src="../templates/default/images/tick_white.gif" height="31" width="35"/>                  
              </div>
            </td>
            <td>
             <div class="ImgContainerHeaderFont">Product Name</div>                      
             <div class="ImgContainerSubHeaderFont">Product</div>                        
            </td>
          </tr>
         </table>    
        </div>
        <div class="ImgContainer">
          <img src="../sample.jpg" height="150" width="200"/>
        </div>
        <div>
         <table class="PrefTblStyl" align="center">
           <tr>
            <td>Sample Text</td>
            <td>Sample Text</td>
           </tr>
           <tr>
            <td>Sample Text</td>
            <td>Sample Text</td>
           </tr>
         </table>
        </div>          
       <a class="checkbox-select" href="#" onclick="AddProjectId(1)">I Am Interested</a>
       <a class="checkbox-deselect" href="#" onclick="RemoveProjectId(1)">NotInterested</a>
    </li>
 </pre>
4

3 に答える 3

1 
$(".checklist .checkbox-select").on('click', function() {
    $(this).parent().find('.TickImgCont').show();
});​
于 2012-08-23T08:12:00.380 に答える
0

はるかに良いアイデアは、目盛りの画像を含むボックスのスタイルを持つ個別の CSS クラスを作成することです。この方法では、多くの jQuery 呼び出しを行う代わりに、クラスを追加するだけで済みます。

于 2012-08-23T08:08:52.910 に答える
0

あなたが使用することができます

  $(".checklist .checkbox-select").click(
    function(event) {
         $(this).closest('.TickImgCont').show());      
    }
  });

<li>
    <div style="padding:10px 0px 0px 10px;">
     <table>
      <tr>
        <td>
          <div class="TickImgCont" style="display:none;">
        <img src="../templates/default/images/tick_white.gif" height="31" width="35"/>                  
          </div>
        </td>
        <td>
         <div class="ImgContainerHeaderFont">Product Name</div>                      
         <div class="ImgContainerSubHeaderFont">Product</div>                        
        </td>
      </tr>
     </table>    
    </div>
    <div class="ImgContainer">
      <img src="../sample.jpg" height="150" width="200"/>
    </div>
    <div>
     <table class="PrefTblStyl" align="center">
       <tr>
        <td>Sample Text</td>
        <td>Sample Text</td>
       </tr>
       <tr>
        <td>Sample Text</td>
        <td>Sample Text</td>
       </tr>
     </table>
    </div>          
   <a class="checkbox-select" href="#" onclick="AddProjectId(1)">I Am Interested</a>
   <a class="checkbox-deselect" href="#" onclick="RemoveProjectId(1)">NotInterested</a>
</li>
于 2012-08-23T08:08:00.837 に答える