Question

当在表格行中选中复选框时，我试图使用彩色图像制作一组灰色图像。再次取消选中该复选框时，此操作将反转。更改必须仅适用于该特定tablerow中的img元素。表行将动态生成，但将遵循此DOM结构。我查看了.parent（）。parentNll（），但这些似乎没有提供匹配。我很乐意应用非jQuery javascript，如果在jQuery中不可能，但我更愿意使用jQuery，如果可能的话

<html>

  <head>
      <meta charset="utf-8">
       <title> Total Tutor </title>
        <link type="text/css" rel="stylesheet" href="course.css"> 
          <script src="../jquery.js"></script> 

    <style>
       .color{display:none;}
       .grey{display:block;}  
    </style>

  </head>   

 <body>

  <div>  
   <form>
    <table id="units" >

     <thead> 
       <tr>
        <th>Units</th> 
            <th>Add Video</th>
            <th>Add Worksheet</th>
            <th>Add Quiz</th>
            <th>Add Exam</th>
            <th>Add Revision</th>
        </tr>  
      </thead>

      <tbody>

       <!--  table rows will be dynamically generated based on a SQL query -->
        <tr>
            <td class="unit_table"><input type="checkbox" class="design_units" name="units[]" value="Bike"> Unit 2.1.1.1</td>
            <td class="unit_table"><img class="color" src="../images/video-selector-small.png"><img class="grey" disabled src="../images/video-selector-small-grey.png"></td>      
            <td class="unit_table"><img class="color" src="../images/worksheet-selector-small.png"><img class="grey" disabled src="../images/worksheet-selector-small-grey.png"></td>    
        </tr>

        <tr>
            <td class="unit_table"><input type="checkbox" class="design_units" name="units[]" value="Bike"> Unit 3.1.1.1</td>
            <td class="unit_table"><img class="color" src="../images/video-selector-small.png"><img class="grey" disabled src="../images/video-selector-small-grey.png"></td>      
            <td class="unit_table"><img class="color" src="../images/worksheet-selector-small.png"><img class="grey" disabled src="../images/worksheet-selector-small-grey.png"></td>    
        </tr>

      </tbody>
    </table> 

    <button type="submit" id="save_design_course" name="sent" value="save_design_course"><img src="../images/save.png"></button>

  </form>
 </div>
 </body>
</html>  

<script>

  $(document).ready(function() 
    {
     $(".design_units").click(function ()
      {
       if ($(this).is(':checked')) 
        {
          /*change all of the img elements of class grey to display: none 
          and change all img elements of class color to display:block*/
        } 

       if (!$(this).is(':checked')) 
        {
          /*change all of the img elements of class grey to display:block 
          and change all img elements of class color to display:none*/
        } 
      });    
</script>

Answer 1

脚本块中有很多语法错误。

您可以使用nearest（）并查找tr并访问颜色和灰色类

 $(document).ready(function(){
     $(".design_units").on('click',function(){
       if ($(this).is(':checked')) {
          /*change all of the img elements of class grey to display: none 
          and change all img elements of class color to display:block*/
          $(this).closest('tr').find('.color').show();
          $(this).closest('tr').find('.grey').hide();          
        } 

       if (!$(this).is(':checked')){
          /*change all of the img elements of class grey to display:block 
          and change all img elements of class color to display:none*/
          $(this).closest('tr').find('.color').hide();
          $(this).closest('tr').find('.grey').show();
        } 
      });  
   });

Answer 2

如果要生成动态，请使用on作为

$("body").on("change", ".design_units", function(){ //Your code });

如果在事件绑定时页面上存在，则可以使用其他选择器而不是＆＃34; body＆＃34 ;.

使用find和closest查找您案例中的确切元素。例如。 -

$(this).closest('tr').find('.grey').hide();

Answer 3

显示和隐藏图片的另一种简单方法是使用toggle()而不是检查其checked属性

toggle()用于将元素的可见性从hide切换为show，反之亦然。

$(".design_units").click(function ()
{
  $(this).parents('tr').find('img.grey').toggle();
  $(this).parents('tr').find('img.color').toggle();
});

演示：https://jsfiddle.net/81sLL212/

Answer 4

在click处理程序中（或者你可以使用change处理程序，但是对于复选框都可以），你可以使用.closest("tr")找到被点击元素的关联图像导航到包含行，然后.find("img")导航回到该行中的图像。

然后，您可以在这些图片.toggle()上调用passing a boolean argument，以指示是否显示或隐藏每个图片。

这意味着您不需要if/else结构，事件处理程序可以减少到三行：

＆＃13;

$(document).ready(function() {
  $(".design_units").click(function() {            // When a CB is clicked
    var imgs = $(this).closest("tr").find("img");  // find its associated imgs
    imgs.filter(".color").toggle(this.checked);    // Show color if CB checked
    imgs.filter(".grey").toggle(!this.checked);    // Show grey if CB not checked
  });
});

＆＃13;

.color { display: none; }
.grey { display: block; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <table id="units">
      <tbody>
        <tr>
          <td class="unit_table"><input type="checkbox" class="design_units" name="units[]" value="Bike"> Unit 2.1.1.1</td>
          <td class="unit_table"><img class="color" alt="color" src="../images/video-selector-small.png"><img class="grey" alt="grey" disabled src="../images/video-selector-small-grey.png"></td>
          <td class="unit_table"><img class="color" alt="color" src="../images/worksheet-selector-small.png"><img class="grey" alt="grey" disabled src="../images/worksheet-selector-small-grey.png"></td>
        </tr>
        <tr>
          <td class="unit_table"><input type="checkbox" class="design_units" name="units[]" value="Bike"> Unit 3.1.1.1</td>
          <td class="unit_table"><img class="color" alt="color" src="../images/video-selector-small.png"><img class="grey" alt="grey" disabled src="../images/video-selector-small-grey.png"></td>
          <td class="unit_table"><img class="color" alt="color" src="../images/worksheet-selector-small.png"><img class="grey" alt="grey" disabled src="../images/worksheet-selector-small-grey.png"></td>
        </tr>
      </tbody>
    </table>

＆＃13;

请注意，处理单个复选框时this.checked会为您提供与$(this).is(':checked')相同的布尔值，除了它更容易阅读，更快地输入和执行更快。

（注意：在上面的演示中，我为图片添加了alt属性，以便您可以判断他们是.color还是.grey需要有效的src路径。）

编辑：如果表是在初始页面加载后通过Ajax 加载的意义上动态生成的，则替换以下行：

$(".design_units").click(function() {

...与：

$(document).on("click", ".design_units", function() {

理想情况下，document将被最接近的静态父元素替换。

Answer 5

您可以使用closest()获取具有特定标记的最近祖先，然后find()以使所有子项与该祖先下的jQuery选择器匹配。

我为按钮切换了图像，因为我们无法访问实际图像，并关闭了document.ready()功能：

  $(document).ready(function() 
    {
     $(".design_units").click(function ()
      {
       if ($(this).is(':checked')) 
        {
          $(this).closest('tr').find('.grey').hide();
          $(this).closest('tr').find('.color').show();
        } 

       if (!$(this).is(':checked')) 
        {
          $(this).closest('tr').find('.grey').show();
          $(this).closest('tr').find('.color').hide();
        } 
      });
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

  <head>
      <meta charset="utf-8">
       <title> Total Tutor </title>
        <link type="text/css" rel="stylesheet" href="course.css"> 
          <script src="../jquery.js"></script> 

    <style>
       .color{display:none;}
       .grey{display:block;}  
    </style>

  </head>   

 <body>

  <div>  
   <form>
    <table id="units" >

     <thead> 
       <tr>
        <th>Units</th> 
            <th>Add Video</th>
            <th>Add Worksheet</th>
            <th>Add Quiz</th>
            <th>Add Exam</th>
            <th>Add Revision</th>
        </tr>  
      </thead>

      <tbody>

       <!--  table rows will be dynamically generated based on a SQL query -->
        <tr>
            <td class="unit_table"><input type="checkbox" class="design_units" name="units[]" value="Bike"> Unit 2.1.1.1</td>
            <td class="unit_table"><button class="color" src="../images/video-selector-small.png"><button class="grey" disabled src="../images/video-selector-small-grey.png"></td>      
            <td class="unit_table"><button class="color" src="../images/worksheet-selector-small.png"><button class="grey" disabled src="../images/worksheet-selector-small-grey.png"></td>    
        </tr>

        <tr>
            <td class="unit_table"><input type="checkbox" class="design_units" name="units[]" value="Bike"> Unit 3.1.1.1</td>
            <td class="unit_table"><button class="color" src="../images/video-selector-small.png"><button class="grey" disabled src="../images/video-selector-small-grey.png"></td>      
            <td class="unit_table"><button class="color" src="../images/worksheet-selector-small.png"><button class="grey" disabled src="../images/worksheet-selector-small-grey.png"></td>    
        </tr>

      </tbody>
    </table> 

    <button type="submit" id="save_design_course" name="sent" value="save_design_course"><img src="../images/save.png"></button>

  </form>
 </div>
 </body>
</html>

Answer 6

您可以使用.parents()选择器获取相应的表格行，然后在该行中搜索所需的图像。以下是遵循该模式的问题的示例解决方案：

$('.design-units').on('change', (e)=>{
  const $row = $(e.target).parents('tr');
  const $grays = $row.find('.grey');
  const $colors = $row.find('.color');

  const isChecked = $(e.target).is(':checked');

  if(isChecked){
    $grays.attr('disabled', false);
    $colors.attr('disabled', true);
  } else {
    $grays.attr('disabled', true);
    $colors.attr('disabled', false);
  }
})

Answer 7

您需要遍历每个img

$(document).ready(function() 
    {
     $(".design_units").click(function ()
      {
       if ($(this).is(':checked')) 
        {
         $(this).parent().nextAll('td').find('img').each(function(){
          if($(this).attr('class') == 'color')
          {
            $(this).css('display','block');
          }else if($(this).attr('class') == 'grey')
          {
            $(this).css('display','none');
          }
         })
          /*change all of the img elements of class grey to display: none 
          and change all img elements of class color to display:block*/
        } 

       if (!$(this).is(':checked')) 
        {
        $(this).parent().nextAll('td').find('img').each(function(){
          if($(this).attr('class') == 'grey')
          {
            $(this).css('display','block');
          }else if($(this).attr('class') == 'color')
          {
            $(this).css('display','none');
          }
         })
          /*change all of the img elements of class grey to display:block 
          and change all img elements of class color to display:none*/
        } 
      });   
      });

工作小提琴：https://jsfiddle.net/gaq23jbL/3/

Answer 8

试试这个，

    <html>
    <hrad></head>
    <body>
    <div>  
           <form>
            <table id="units" >

             <thead> 
               <tr>
                <th>Units</th> 
                    <th>Add Video</th>
                    <th>Add Worksheet</th>
                    <th>Add Quiz</th>
                    <th>Add Exam</th>
                    <th>Add Revision</th>
                </tr>  
              </thead>

              <tbody>

               <!--  table rows will be dynamically generated based on a SQL query -->
                <tr>
                    <td class="unit_table"><input type="checkbox" class="design_units" name="units[]" value="Bike"> Unit 2.1.1.1</td>
                    <td class="unit_table"><img alt="color" class="color" src="../images/video-selector-small.png"><img alt="grey" class="grey" disabled src="../images/video-selector-small-grey.png"></td>      
                    <td class="unit_table"><img class="color" src="../images/worksheet-selector-small.png"><img class="grey" disabled src="../images/worksheet-selector-small-grey.png"></td>    
                </tr>

                <tr>
                    <td class="unit_table"><input  type="checkbox" class="design_units" name="units[]" value="Bike"> Unit 3.1.1.1</td>
                    <td class="unit_table"><img class="color" src="../images/video-selector-small.png"><img class="grey" disabled src="../images/video-selector-small-grey.png"></td>      
                    <td class="unit_table"><img class="color" src="../images/worksheet-selector-small.png"><img class="grey" disabled src="../images/worksheet-selector-small-grey.png"></td>    
                </tr>

              </tbody>
            </table> 

            <button type="submit" id="save_design_course" name="sent" value="save_design_course"><img src="../images/save.png"></button>

          </form>
         </div>


        <script>
            $(function(){
          $('#units').on('click','.design_units',function ()
      {
       if ($(this).is(':checked')) 
        {
            $($(this).closest('tr').find('.grey')).hide();
          $($(this).closest('tr').find('.color')).show();
          /*change all of the img elements of class grey to display: none 
          and change all img elements of class color to display:block*/
        } 

       if (!$(this).is(':checked')) 
        {
        $($(this).closest('tr').find('.grey')).show();
          $($(this).closest('tr').find('.color')).hide();
          /*change all of the img elements of class grey to display:block 
          and change all img elements of class color to display:none*/
        } 
 });
        });
        </script>
    </body>
    </html>

js-fiddle

如何使用jQuery更改与类条件匹配的直接img同级元素的CSS

8 个答案: