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 的显示，其中勾选从无到阻止

我想知道是否有比通过所有子节点到达具有 Tick 图像的 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

你可以使用

  $(".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 回答
0

一个更好的主意是创建一个单独的 CSS 类，该类具有框的样式，包括刻度的图像。这样，您只需要添加类而不是执行大量的 jQuery 调用。

于 2012-08-23T08:08:52.910 回答