如何将变量附加到javascript中的类上？

Question

So I have been stuck on this for some time now, and cant seem to get the right syntax.

I have a While loop which goes through several elements successfully until it reaches some forms.

I'm attempting to make each form with in the while loop to have a different(unique) class id, at the moment i'm just using a simple count which is attached to the onclick and also class.

The onclick then runs the JS, I'm just struggling to add the unique count to the class in the JS, hopefully my code will explain more.

JS

function hidelike(t) {
if ($(".like").is(':visible')) {

    $(".like").hide();
    $(".unlike").show();
    $(".dislike").hide();


} else {
   $(".like").show();
   $(".unlike").hide();
   $(".dislike").show();
}
}

HTML

<form class="likesubmit<?php echo $like_count;?>">
<input type="button" class="like<?php echo $like_count;?>" value="Like"  onclick="hidelike(<?php echo $like_count;?>)">   
</form>

I have defined the count already so that's not the problem I have also alerted the count in the JS and that works fine.

Hope I explained my problem okay, thanks in advance James.

Answer 1

well as far as I see from your HTML you have no element with a class of like. if you want to target all classes of the form like1 , like2 ... , you want to select with: http://api.jquery.com/attribute-starts-with-selector/

if ($('input[class^="like"]').is(':visible')) {

or by value

if ($('input[value="Like"]').is(':visible')) {

Both of the above 2 methods are non-ideal What you really want to do is add an extra unique class to the inputs you want to target.

in your PHP this time:

<form class="likesubmit<?php echo $like_count;?>">
<input type="button" class="like like<?php echo $like_count;?>" value="Like"  onclick="hidelike(<?php echo $like_count;?>)">   
</form>

Notice the class="like like<?php ...." . This way, your inputs will have 2 classes:

• a normal like class
• and a unique like1 , like2 ... etc class

So if you just use your current JS it will work

UPDATE: your JS is wrong. You are selecting ALL like, dislike, etc buttons when you click any button

what you need is:

PHP (add an extra number attribute to all buttons (also to the dislike, etc))

<form class="likesubmit<?php echo $like_count;?>">
<input type="button" class="like like<?php echo $like_count;?>" number="<?php echo $like_count; ?>" value="Like"  onclick="hidelike(<?php echo $like_count;?>)">   
</form>

JS (use the number attribute)

function hidelike(t) {
if ($(".like" + t).is(':visible')) {
    $(".like" + t).hide();
    $(".unlike" + t).show();
    $(".dislike" + t).hide();
} else {
   $(".like" + t).show();
   $(".unlike" + t).hide();
   $(".dislike" + t).show();
}
}

Answer 2

You could also use the data attribute here.

<input class="like" data-id="<?= $like_count?>" onclick="hidelike(this)" />   

Then you can extract the property if you really need it or just hide the element.

function hideLike(elem) {
    var $elem = $(elem);
    var id = $elem.data('id');

    $elem.hide();
    $('input.like[data-id='+id+']').hide();
}