Question

我想保存我单击过的文章的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)"
    });
});
});

使用真正的id“ test”有效，但是使用“ id”则无效，我也不知道为什么，我可能没有正确使用this.id。

Answer 1

您必须将变量id放在＃选择器中。

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

Answer 2

$("id")将查找ID为“ id”的元素。如果ID在名为“ id”的变量中，则需要$('#' + id)。（“＃”是在选择器中将其标识为ID的原因，您希望不带引号的变量名获取其值，而不是文字字符串“ id”。）

但是，在这种情况下，您已经在this中引用了您关心的元素，因此根本不需要使用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和香草方法之间来回切换—很好地混合它们，与选择一种样式并坚持使用相比，它更容易调试。）

Answer 3

您可以使用

$(this).css({

更改点击项的css

如果您想使用IDs

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

如何保存ID并正确使用它？

3 个答案: