jquery - jQuery - 切换属性的值？

Question

所以我在 jQuery 和 PHP 中创建了一个成本计算器。我使用以下代码段来切换按钮，因此用户将看到检查的内容。

$("[data-button='5']").click(function(){
        $("[data-button='5'] .status").attr("src" , "hintalaskurikuvat/greenstatus.png");
        $("[data-button='5']").toggleClass("selected");

        });

但是，它不会切换图像，我知道。hintalaskurikuvat/greenstatus.png有没有一种简单的方法可以在 src和hintalaskurikuvat/redstatus.pngsrc之间切换 [data-button='5']？

Answer 1

以下是我将它作为 JQuery 的扩展提供的操作（只需将其添加到您的 *.js 文件中）：

(function($) {

$.fn.toggleAttr = function(attribute, value) {
/// <summary>
///     Toggles on/off provided attribute for any tag/element 
/// </summary>
/// <param name="attribute" type="object">
///    Name of attribute to add or remove, eg: checked=""
/// </param> 
/// <param name="value" type="object">
///    Value of the attribute to add or remove, eg: ="checked"
/// </param> 
    if($(this).attr(attribute)){
        $(this).removeAttr(attribute,value);
    }
    else{
        $(this).attr(attribute,value);
    } 
};
})(jQuery);

和简单的使用方法：

$('.someclass').toggleAttr('checked', 'checked');

Answer 2

你可以这样做：

var sel = $("[data-button='5']");
sel.find('.status').attr("src", sel.hasClass('selected') ? "greenstatus.png" : "redstatus.png");

Answer 3

也许这对你有用

var image;
if ($("[data-button='5']").hasClass("selected"))
    image = "hintalaskurikuvat/greenstatus.png";   
else
    image = "hintalaskurikuvat/redstatus.png";

$("[data-button='5'] .status").attr("src" , image);

Answer 4

尝试在你的点击函数中添加这个：

$("[data-button='5']").attr("src", ($("[data-button='5']").attr("src")=="hintalaskurikuvat/greenstatus.png") ? "hintalaskurikuvat/redstatus.png":"hintalaskurikuvat/greenstatus.png" );

Answer 5

$("[data-button='5']").click(function(){
    var $img = $(".status", this);
    var cur = $img.attr("src");
    var fst = 'hintalaskurikuvat/greenstatus.png';
    var scd = 'hintalaskurikuvat/redstatus.png';
    $img.attr('src', cur == fst ? scd : fst);
    $(this).toggleClass("selected");
});