3

そこで、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を の src として切り替える簡単な方法はあり [data-button='5']ますか?

4

5 に答える 5

7

これを 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');
于 2012-11-15T15:57:43.017 に答える
2

次のようなことができます。

var sel = $("[data-button='5']");
sel.find('.status').attr("src", sel.hasClass('selected') ? "greenstatus.png" : "redstatus.png");
于 2012-09-21T18:23:22.210 に答える
1

多分これはあなたのために働くかもしれません

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

$("[data-button='5'] .status").attr("src" , image);
于 2012-09-21T18:23:18.610 に答える
0 
$("[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");
});
于 2012-09-21T18:23:06.937 に答える
0

これをクリック機能に追加してみてください：

$("[data-button='5']").attr("src", ($("[data-button='5']").attr("src")=="hintalaskurikuvat/greenstatus.png") ? "hintalaskurikuvat/redstatus.png":"hintalaskurikuvat/greenstatus.png" );
于 2012-09-21T18:21:50.933 に答える