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

Check this 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;
}

onClick addClass到您单击的图像

3 个答案: