Question

HTML:
I’ve attached a simplified example of the problem I’m facing:

<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:
I’m already pulling myProduct from the page title and forcing lowercase. Next I’m attempting to remove this product from the group of links based on its class. Its quite possible this is jquery101 however I can’t figure out how to add a class to a link using a variable to determine which class to select. In this example lets assume var myProduct = Product2

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

Also, I am still learning so if you have the time a Brief explination of why what i’m doing is wrong would go a long way. Thanks for your time!

Answer 1

Simply concat the class name to the selector string:

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

---

Extra info as you requested:

Don’t use a class “display-none”… change it’s name or use jQuery native code that hides elements(hide(docs))

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

Changing css rules is with the css(docs) function:

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

Adding class is with addClass function:

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

Change myProduct and removeProduct names to more meaningful variable names:

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