Javascript 如何保存id并正确使用它？

我想保存我点击过的文章的id，并用它来用this.id修改它的css规则。 用一个已知的id，它可以工作，但当我试图改变我的功能，让它与每一篇文章一起工作时，它就不再工作了

这是我学校的一个项目，如果这个问题已经回答了，也很抱歉，但我对js和jquery还不熟悉，所以我不知道为什么它对我不起作用

<section id="shop">
            <article class='savons' id="test">
                <img src="../css/images/savons/1,6 euros/1 violette.jpg" alt="savon violette" id="photo">
                <div class='info' id="info">
                    <h6>savon de marseille 50g </h6>
                    <p class='prix'>2,90€</p>
                    <p class='zoom'><a href="#">voir</a></p>
                </div>
            </article>

            <article class='savons' id="test1">
                <img src="../css/images/savons/1,6 euros/2 porquerolle.jpg" alt="savon porquerolle">
                <div class='info'>
                    <h6>savon détachant exfoliant 100g</h6>
                    <p class='prix'>3,75€</p>
                    <p class='zoom'><a href="#">voir</a></p>
                </div>
            </article>

            <article class='savons' id="test2">
                <img src="../css/images/savons/1,6 euros/3 marine.jpg" alt="savon marine ">
                <div class='info'>
                    <h6>savon de marseille 100g</h6>
                    <p class='prix'>3,25€</p>
                    <p class='zoom'><a href="#">voir</a></p>
                </div>
            </article>
</section>


$(document).ready(function () {
$('.savons').click(function(){
    let id=$(this).attr('id');
    $("id").css({
        color : 'red', // couleur rouge
        width : '1500px', 
        height : '500px', 
        marginLeft:'150px',
        marginRight:'50px',
        border:'solid'
    });
    $("#photo").css({
       width : '350px', 
       height : '350px'
    });
    $("#info").css({
       width : '350px', 
       height : '350px'
    });
    $("article").not(document.getElementById("id")).css({
       filter:"blur(10px)"
    });
});
});

$（文档）.ready（函数（）{
$（'.savons'）。单击（函数（）{
设id=$（this.attr（'id'）；
$（“id”）.css({
颜色：“红色”//couleur胭脂
宽度：“1500px”，
高度：“500px”，
边缘左侧：'150px'，
右边边：'50px'，
边框：'实心'
});
$（“#照片”）.css({
宽度：“350px”，
高度：'350px'
});
$（“#信息”）.css({
宽度：“350px”，
高度：'350px'
});
$（“article”）.not（document.getElementById（“id”）.css({
过滤器：“模糊（10px）”
});
});
});

---

对于真正的id“test”，它可以工作，但是对于“id”，它不能工作，我不知道为什么，我可能没有正确使用这个.id。

您必须将变量id与#选择器一起放置

let id=$(this).attr('id'); 
$("#"+id).css({

---

必须将变量id与#选择器放在一起

let id=$(this).attr('id'); 
$("#"+id).css({

---

在你的情况下，你可以使用

$(this).css({

更改已单击项的css的步骤

如果你想使用ID

$("#"+id).css({

---

在你的情况下，你可以使用

$(this).css({

更改已单击项的css的步骤

如果你想使用ID

$("#"+id).css({

$（“#id”）

将查找id为“id”的元素。如果在名为“ID”的变量中有ID，则需要

$（'#'+ID）

。（将其标识为选择器中的ID的是“#”，您希望不带引号的变量名获取其值，而不是文字字符串“ID”。）

但是，在本例中，您已经在

中引用了您关心的元素，因此根本不需要使用ID：

$(this).css({
        color : 'red', // couleur rouge
        width : '1500px', 
        height : '500px', 
        marginLeft:'150px',
        marginRight:'50px',
        border:'solid'
    });

类似地，在代码的后面部分，可以使用
not（$（this））
代替当前使用的普通DOM方法
getElementById
。（尽管如果您继续使用该ID，变量名也应该在那里不加引号：
getElementById（ID）
，而不是
getElementById（“ID”）
）

（通常认为最好不要在等价的jQuery和vanilla方法之间不加区别地来回切换——将它们混合使用效果很好，只是调试起来要比选择一种样式并坚持使用更容易混淆。）
$（“#id”）
将查找id为“id”的元素。如果在名为“ID”的变量中有ID，则需要
$（'#'+ID）
。（将其标识为选择器中的ID的是“#”，您希望不带引号的变量名获取其值，而不是文字字符串“ID”。）

但是，在本例中，您已经在
中引用了您关心的元素，因此根本不需要使用ID：

$(this).css({
        color : 'red', // couleur rouge
        width : '1500px', 
        height : '500px', 
        marginLeft:'150px',
        marginRight:'50px',
        border:'solid'
    });

类似地，在代码的后面部分，可以使用
not（$（this））
代替当前使用的普通DOM方法
getElementById
。（尽管如果您继续使用该ID，变量名也应该在那里不加引号：
getElementById（ID）
，而不是
getElementById（“ID”）
）

（通常认为最好不要在等价的jQuery和vanilla方法之间不加区别地来回切换——混合使用它们效果很好，只是调试起来要比选择一种样式并坚持使用更混乱。）