Question

我想在选中复选框时对“直通”进行文本修饰，并在未选中该复选框时删除装饰。

这是我的js：

if ($(this).is(':checked')) {
    $(this).siblings('label').style.textDecoration = "line-through";
} else {
    $(this).siblings('label').style.textDecoration = "none";
}

使用当前代码我得到错误

未捕获的TypeError：无法设置未定义的属性“textDecoration”

我认为这是因为它不喜欢我的this.siblings字符串。

Answer 1

尝试这个。

$(this).siblings('label').css('text-decoration', 'line-through');

$(this).siblings('label').css('text-decoration', 'none');

Answer 2

如果您的label checkbox输入后，您可以使用普通CSS 和下一个同级操作符+ < / p>

＆＃13;

input[type=checkbox]:checked + label{
   text-decoration: line-through;
}

＆＃13;

<input type="checkbox" id="a1" name="a1"><label for="a1">UNCHECKED</label>

＆＃13;

如果它不是直接的兄弟姐妹，则可以使用 同级操作员~ 而不是+。

.style是简单的JS，在您处理jQuery选择器元素数组时只引用一个元素。

所以是的，用户jQuery的.css()方法将更改应用到所有元素（jQuery将在内部循环所有这些，就像在JS中使用for循环或{{1 }}）

如果您还想要，也可以使用 条件运算符 forEach（不包含?:）来执行此操作，只需：

＆＃13;

if else

＆＃13;

$(':checkbox').on("change", function(){
    $(this).siblings('label').css({"text-decoration": this.checked ? "line-through" : "none"});
});

＆＃13;

如果你想要可以混合使用jQuery和JS，这是一个例子：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
    <input type="checkbox" id="a1" name="a1"> <label for="a1">UNCHECKED</label>
</p>

但正如我之前所说，如果不在循环中使用它就无法应用于多个元素，将该当前索引作为 get 值传递：

$("#element")[0]/*or use .get(0)*/.style.textDecoration = "none";

这是jQuery和JS的混合：

$(".elements").each(function(i){
   $(this)[i].style.textDecoration = this.checked ? "line-through" : "none" ;
});

Answer 3

.sibling('label')会返回元素还是文字？

如果它返回Text，那那就是你的问题。

将.style.textDecoration应用于元素。

该函数标识元素中的文本节点并进行装饰。

如何为＆＃34;这个＆＃34; .sibling设置文本修饰

3 个答案: