Javascript 使用z索引选中复选框时创建颜色覆盖

我有一个复选框，用于选择包含产品信息的表。一旦选定，css样式将覆盖30%的颜色，这样很明显该项目已被选中

 $(function ()
    {          
        $("input[type='checkbox']").change(function ()
        {
            if ($(this).is(":checked"))
            {
                $(this).parent().addClass("jobSelected");
            } else
            {
                $(this).parent().removeClass("jobSelected");
            }
        });
    });   
    </script>



<style type="text/css">
.jobSelected {
    background-color: hsla(0,0%,0%,0.50);
    position: relative;
}
</style>

仅使用css和jquery，我就可以调用z索引大于用于直观查看覆盖的图像的样式。覆盖样式起作用并显示正确的z索引，但它不在图像上方

 $(function ()
    {          
        $("input[type='checkbox']").change(function ()
        {
            if ($(this).is(":checked"))
            {
                $(this).parent().addClass("jobSelected");
            } else
            {
                $(this).parent().removeClass("jobSelected");
            }
        });
    });   
    </script>



<style type="text/css">
.jobSelected {
    background-color: hsla(0,0%,0%,0.50);
    position: relative;
}
</style>

使用Jquery，我已经将图像的z索引强制返回到-10值。仍然显示在彩色分区的顶部… 我甚至可以强制同一Jquery中的div移动到z-index 105，但它仍然没有显示在较小z-index的图像顶部

 $(function ()
    {          
        $("input[type='checkbox']").change(function ()
        {
            if ($(this).is(":checked"))
            {
                $(this).parent().addClass("jobSelected");
            } else
            {
                $(this).parent().removeClass("jobSelected");
            }
        });
    });   
    </script>



<style type="text/css">
.jobSelected {
    background-color: hsla(0,0%,0%,0.50);
    position: relative;
}
</style>

我认为问题在于，接收较大z索引的div将其内部的所有内容作为起点，因此嵌套图像也会在z索引级别上移

 $(function ()
    {          
        $("input[type='checkbox']").change(function ()
        {
            if ($(this).is(":checked"))
            {
                $(this).parent().addClass("jobSelected");
            } else
            {
                $(this).parent().removeClass("jobSelected");
            }
        });
    });   
    </script>



<style type="text/css">
.jobSelected {
    background-color: hsla(0,0%,0%,0.50);
    position: relative;
}
</style>

如果是这样的话，如何最好地对一系列需要使用30%不透明度样式覆盖的动态生成的表进行覆盖

 $(function ()
    {          
        $("input[type='checkbox']").change(function ()
        {
            if ($(this).is(":checked"))
            {
                $(this).parent().addClass("jobSelected");
            } else
            {
                $(this).parent().removeClass("jobSelected");
            }
        });
    });   
    </script>



<style type="text/css">
.jobSelected {
    background-color: hsla(0,0%,0%,0.50);
    position: relative;
}
</style>

更新的工作代码：

 $(function ()
    {          
        $("input[type='checkbox']").change(function ()
        {
            if ($(this).is(":checked"))
            {
                $(this).parent().addClass("jobSelected");
            } else
            {
                $(this).parent().removeClass("jobSelected");
            }
        });
    });   
    </script>



<style type="text/css">
.jobSelected {
    background-color: hsla(0,0%,0%,0.50);
    position: relative;
}
</style>

更新的工作代码：

 $(function ()
    {          
        $("input[type='checkbox']").change(function ()
        {
            if ($(this).is(":checked"))
            {
                $(this).parent().addClass("jobSelected");
            } else
            {
                $(this).parent().removeClass("jobSelected");
            }
        });
    });   
    </script>



<style type="text/css">
.jobSelected {
    background-color: hsla(0,0%,0%,0.50);
    position: relative;
}
</style>

<div>
  <table  cellpadding="6" cellspacing="0" border="0" width="100%">
    <thead>
      <tr>
        <td> Item 1 </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><img src="http://sgdesign.com/temp/temp1.png" alt="" style="z-index:-1; position:relative;"></td>
      </tr>
    </tbody>
  </table>
  <input type="checkbox" name="checkbox" id="checkbox">
  Select </div>


<br>
<br>


<div>
  <table  cellpadding="6" cellspacing="0" border="0" width="100%">
    <thead>
      <tr>
        <td > Item 2 </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td valign="top" style="border-left:0px none;padding-left:12px;"><img src="http://sgdesign.com/temp/temp2.png" alt="" style="z-index:-1; position:relative;"></td>
      </tr>
    </tbody>
  </table>

    <input type="checkbox" name="checkbox2" id="checkbox2">
  Select </div>

---

上面的代码在设置通过浏览器检查元素可以看到的预期值方面做得很好，但是结果没有达到目标。

如果您是正确的，Z索引更改不会层叠，因为您正在处理一个表。为了解决这个问题，直接在需要的div上更改z索引

 $(function ()
    {          
        $("input[type='checkbox']").change(function ()
        {
            if ($(this).is(":checked"))
            {
                $(this).parent().addClass("jobSelected");
            } else
            {
                $(this).parent().removeClass("jobSelected");
            }
        });
    });   
    </script>



<style type="text/css">
.jobSelected {
    background-color: hsla(0,0%,0%,0.50);
    position: relative;
}
</style>

尝试将CSS更改为：

 $(function ()
    {          
        $("input[type='checkbox']").change(function ()
        {
            if ($(this).is(":checked"))
            {
                $(this).parent().addClass("jobSelected");
            } else
            {
                $(this).parent().removeClass("jobSelected");
            }
        });
    });   
    </script>



<style type="text/css">
.jobSelected {
    background-color: hsla(0,0%,0%,0.50);
    position: relative;
}
</style>

.jobSelected {
    background-color: hsla(0,0%,0%,0.30);
    position: relative;
}

.jobSelected div.overlay {
    z-index: 50;
}

当然，您的HTML也应该更新：

 $(function ()
    {          
        $("input[type='checkbox']").change(function ()
        {
            if ($(this).is(":checked"))
            {
                $(this).parent().addClass("jobSelected");
            } else
            {
                $(this).parent().removeClass("jobSelected");
            }
        });
    });   
    </script>



<style type="text/css">
.jobSelected {
    background-color: hsla(0,0%,0%,0.50);
    position: relative;
}
</style>

    <tr>
    <td valign="top" style="border-left:0px none;padding-left:12px;">
        <div style="z-index:100; position:relative;" class="overlay">
            <img src="http://sgdesign.com/temp/temp1.png" alt="" style="z-index:-1; position:relative;">
        </div>
    </td>
    </tr>

---

解决方案是确保没有任何元素以高于动态更新值的z值包装您的选择

 $(function ()
    {          
        $("input[type='checkbox']").change(function ()
        {
            if ($(this).is(":checked"))
            {
                $(this).parent().addClass("jobSelected");
            } else
            {
                $(this).parent().removeClass("jobSelected");
            }
        });
    });   
    </script>



<style type="text/css">
.jobSelected {
    background-color: hsla(0,0%,0%,0.50);
    position: relative;
}
</style>

例如：

 $(function ()
    {          
        $("input[type='checkbox']").change(function ()
        {
            if ($(this).is(":checked"))
            {
                $(this).parent().addClass("jobSelected");
            } else
            {
                $(this).parent().removeClass("jobSelected");
            }
        });
    });   
    </script>



<style type="text/css">
.jobSelected {
    background-color: hsla(0,0%,0%,0.50);
    position: relative;
}
</style>

  <tr>
    <td valign="top" style="border-left:0px none;padding-left:12px;">
        <div style="z-index:100; position:relative;" class="overlay">
            <img src="http://sgdesign.com/temp/temp1.png" alt="" style="z-index:-1; position:relative;">
        </div>
    </td>
    </tr>

---

我们看到一个div以100的z索引深度包装图像，而jquery设置的css为50。删除z-index值为100的div可以使jquery更新的css在50处正确覆盖。

Garcia，感谢您的回答。问题是，一个div将z-index设置为100，它正在包装图像，并导致图像零售更高的z-index。我已经更新了上面的示例，以显示工作版本，作为对其他人的帮助。@Burndogz很高兴您能理解它。既然你从我的答案中复制了代码粘贴到你的答案中，我认为正确的做法是接受我的答案。Garcia，实际上你会看到对你代码的唯一引用是z-index:100处删除的div。也请检查我的CSS，因为它不使用您添加的其他样式。我同意，你帮助了我，也是我能够找到有效解决方案的原因，但完整的示例和自我回答的问题为遇到类似问题的任何人提供了可行的解决方案。我在努力做正确的事情。如果是这样，你至少应该接受你自己的答案。没有公认答案的问题没有那么有用。我试着。。。上面说我需要等到明天：-/还没有足够的街头信誉

 $(function ()
    {          
        $("input[type='checkbox']").change(function ()
        {
            if ($(this).is(":checked"))
            {
                $(this).parent().addClass("jobSelected");
            } else
            {
                $(this).parent().removeClass("jobSelected");
            }
        });
    });   
    </script>



<style type="text/css">
.jobSelected {
    background-color: hsla(0,0%,0%,0.50);
    position: relative;
}
</style>