CODEWITHSUNDEEP
javascriptjquery
Front_End_Dev
Front_End_Dev

Reputation: 1215

Using jquery 1.4 or javascript how would I target a specific link using a variable

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!

Upvotes: 0

Views: 65

Answers (4)

gdoron
gdoron

Reputation: 150253

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();        
}

Upvotes: 2

Manse
Manse

Reputation: 38147

The class attribute / property is used as a generic selector - ie you can apply a class to multiple objects ... the id attribute / property is used for specific selection - and are unique. I suggest you change your HTML to use ids instead of classs

Try something like :

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

uses .css() to change the display property to none

or

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

.hide() does the same thing as the .css() method does above

or

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

where yourclass is a class you want to apply to an element.

And may I suggest you take a look at How jQuery works

Upvotes: 1

The Alpha
The Alpha

Reputation: 146191

Try this if you want to hide the link on click event

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

A fiddle is here.

Upvotes: 0

Manatok
Manatok

Reputation: 5706

Are you looking for this:

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

Separating the string selector from the variable

Upvotes: 0

Related Questions