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和hintalaskurikuvat/redstatus.png作为[data-button='5']的src？

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

jQuery - 切换属性的值？

5 个答案: