jquery - onClick 将类添加到您单击的图像

Question

我从数据库中将一系列图像拉到我的页面上。当有人点击某个样式时，我需要为其添加某种样式。该样式仅适用于您当前单击的图像，而不适用于其他图像。我的脚本会突出显示您单击的每个图像。任何想法如何解决这个问题？

PHP（当我拉出这些图像时）

$war_list .= '
<span name="fighter">
    <label for="'.$value["fighter_id"].'">
        <img src="'.$value["fighter_photo"].'" id="fighter-icon" title="'.$value["fighter_full_name"].'">
    </label> <input type="radio" value="'.$value["fighter_id"].'" id="'.$value["fighter_id"].'" name="list">
</span>';

jQuery

$("span[name=fighter]").click(function() {
    var something = $(this).val();
    $(this).find("img").addClass('red');
    alert(something);   
});

简而言之，我正在尝试这样做：当您单击图像时，它需要添加一个类。当您单击另一个图像时，它将删除最后单击的图像的类别并将其添加到您当前单击的图像中。

Answer 1

试试这个：

$('img').click(function() {
    if('img').hasClass('yourclass') {
        $(this).removeClass('yourclass');
    }
    $(this).addClass('yourclass')
})

或者，如果您想要特定图像，请为每个图像添加一个类：

 <img class="this_image" src="'.$value["fighter_photo"].'" id="fighter-icon" title="'.$value["fighter_full_name"].'">

$('img.this_image').click(function() {
    if('img.this_image').hasClass('yourclass') {
        $(this).removeClass('yourclass');
    }
    $(this).addClass('yourclass')
})

Answer 2

尝试

$("span[name=fighter] img").click(function() {
$("span[name=fighter] img").removeClass('red'); // This removes the existing class
    var something = $(this).parent().parent().val();
    $(this).addClass('red');
    alert(something);   
});

Answer 3

检查这个 JSfiddle以获得您问题的答案：您可以简单地将锚点切换到您的图像标签。

HTML 代码：

<span name="fighter">
    <a>Link 1</a>
</span>
<span name="fighter">
    <a>Link 2</a>
</span>
<span name="fighter">
    <a>Link 3</a>
</span>
<span name="fighter">
    <a>Link 4</a>
</span>

jQuery代码：

var myspan = $("span[name=fighter]").click(function(){
    myspan.find('a').removeClass('red');
    $(this).find('a').first().addClass('red');
});

CSS：

span a{
    color: blue;
}
.red{
    color:red;
}