jquery - 将样式应用于 slider 外部的单独元素

Question

我有一个纯 CSS slider ，其中有几个点指示器显示我在哪张幻灯片上。但我还有另一组位于 slider 之外的数字指示器，我想更改它们的颜色。

我的工作指标 CSS 示例:

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3 {
    background: rgba(0, 0, 0, 0.8);
}

并且此代码不起作用:

input#img-1:checked ~ #title label#slide-link-1,
input#img-2:checked ~ #title label#slide-link-2,
input#img-3:checked ~ #title label#slide-link-3 {
    color: red;
}

也可能超过三张幻灯片。请看看我的代码笔:http://codepen.io/anon/pen/ZbPvde

有没有办法用 CSS 实现它，或者请帮我弄清楚如何用 jQuery 完成它。非常感谢。

Answer 1

您实际上使用的是 ID 而不是类，因此您只能使用#img-dot-1、#img-dot-2、#img-dot-3 一次(与#slide 相同-link) 在你的整个 html 页面中。因此，您可以直接访问它们:

#img-dot-1,
#img-dot-2,
#img-dot-3 {
    background: rgba(0, 0, 0, 0.8);
}

#slide-link-1,
#slide-link-2,
#slide-link-3 {
    color: red;
}

如果 color:red 仍然无效，请尝试:

#slide-link-1,
#slide-link-2,
#slide-link-3 {
    color: red !important;
}

这可能是由于一些附加到内部元素的代码造成的。

编辑:我添加以下屏幕截图以显示更好地工作的功能:

编辑 2:

正如您希望您的代码更改当前幻灯片编号，我做了下一步来实现它:

我添加了下一个 CSS:

.red {
    color: red;
}

#img-dot-1,
#img-dot-2,
#img-dot-3 {
    background: rgba(0, 0, 0, 0.8);
}

然后我将值添加到复选框中，如下所示:

<input type="radio" name="radio-btn" id="img-2" value="2" />

然后我添加了 JQuery 和下一个脚本以使其工作:

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
function select(i)
{
    $("#slide-link-1").removeClass("red");
    $("#slide-link-2").removeClass("red");
    $("#slide-link-3").removeClass("red");
    $("#slide-link-"+i).addClass("red");
}
$("input[type='radio']").change(function()
{
    select($(this).val());
});
</script>

如果你想让它以红色开始，添加:

$("#slide-link-1").addClass('red') 

到脚本部分。