Question

HTML： 我附上了一个我正面临的问题的简化例子：

<h2>Product2</h2>
<div id="products">

    <a class="my-product1" href="#"><span>my-product1<span></a>
    <a class="my-product2" href="#"><span>my-product2<span></a>
    <a class="my-product3" href="#"><span>my-product3<span></a>
    <a class="my-product4" href="#"><span>my-product4<span></a>
    <a class="my-product5" href="#"><span>my-product5<span></a>

</div>

使用Javascript： 我已经从页面标题中拉出myProduct并强制小写。接下来，我试图从基于其类的链接组中删除此产品。它很可能是jquery101但是我无法弄清楚如何使用变量将类添加到链接以确定要选择的类。在这个例子中，我们假设var myProduct = Product2

function removeProduct(myProduct){
    $("a.myProduct").addClass("display-none");
};

另外，我还在学习，如果你有时间简要探讨我为什么做错了会有很长的路要走。谢谢你的时间！

Answer 1

简单地将类名连接到选择器字符串：

$("a."+variable)...

您提出的额外信息：

不要使用“display-none”类...更改名称或使用隐藏元素的jQuery本机代码（hide（docs））

function removeProduct(myProduct){
    $("a." + myProduct).hide();
};

使用css（docs）函数更改css规则：

function removeProduct(myProduct){
    $("a." + myProduct).css('display', 'none');
};

使用addClass函数添加类：

function removeProduct(myProduct){
    $("a." + myProduct).addClass('someClass');
};

将myProduct和removeProduct名称更改为更有意义的变量名称：

function hideAnchorElement(className){
    $("a." + className).hide();        
}

Answer 2

class属性/属性用作通用选择器 - 即您可以将类应用于多个对象... id属性/属性用于特定选择 - 并且是唯一的。我建议您更改HTML以使用id而不是class s

尝试类似：

function removeProduct(myProduct){
    $("a."+myProduct).css("display","none");
};

使用.css()将display属性更改为none

或

function removeProduct(myProduct){
    $("a."+myProduct).hide();
};

.hide()与上面的.css()方法做同样的事情

或

function removeProduct(myProduct){
    $("a."+myProduct).addClass("yourclass");
};

其中yourclass是您要应用于元素的类。

我建议你看看How jQuery works

Answer 3

你在找这个：

function removeProduct(myProduct){
    $("a."+myProduct).addClass("display-none");
};

将字符串选择器与变量

分开

Answer 4

如果要隐藏点击事件

上的链接，请尝试此操作

$(function(){
    $('#products a').on('click', function(e){
        e.preventDefault();
        $(this).hide();
    });
});

小提琴是here。

使用jquery 1.4或javascript如何使用变量来定位特定链接

4 个答案: