无法编辑具有变量的类的 css

Question

我试图通过单击 li 时添加的 li 获得一条线（如购物清单）。

$('document').ready(() => {
            let id = 1;

            $('.knop').click(() => {
                let boodschap = $('.tekst').val();
                let newli = `<li id="boodschap${id}"> ${boodschap}</li>`;
                $(".result").append(`${newli}`);
                id++;
            });

            $('ul').click(() => {
                let target = event.target.id;
                $(`${target}`).css({
                    "text-decoration": "line-through"
                });
                console.log(event.target.id);
            });
        });

我知道问题出在这部分：

 $('ul').click(() => {
                let target = event.target.id;
                $(`${target}`).css({
                    "text-decoration": "line-through"
                });

我的控制台没有出现错误。所以我卡住了。 但是当我对放置 ${target} 的部分进行硬编码时，它可以工作。 您不能在 css 函数中使用变量吗？ 有没有办法解决这个问题？

Answer 1

我相信您的问题是您的 ID 选择器中缺少 #。只需像这样添加它：

$('ul').click(() => {
  let target = event.target.id;
  $(`#${target}`).css({
    "text-decoration": "line-through"
  });
});

或者干脆忘记字符串 ID 的选择，只选择已经被传递的元素，像这样：

$('ul').click(() => {
  $(event.target).css({
    "text-decoration": "line-through"
  });
});

Answer 2

我看到您的顶级示例中有 target.val，但指定的代码只是 hs 目标。

你的代码中有哪一个？

也应该是target.val()？

您能否通过控制台记录您的目标和 target.val() 以确保其等于您的硬编码？

                let target = event.target.id;
console.log("my target", target)
console.log("target val", target.val())
                $(`${target}`).css({
                    "text-decoration": "line-through"
                });```

Answer 3

所以你需要在点击 <li> 时删除它。

$('li').on('click', (evt)=>{
    let target = evt.target;
    $(target).css({'text-decoration': 'line-through'});
    console.log(evt.target.id);
}

您的代码的主要问题是您将目标<li> 的ID 存储在一个名为target 的变量中，而不是目标元素本身。误导性的变量名称可能会导致混淆。