0

http://jsfiddle.net/4QZED/6/。選択されていない無線とホバー/マウスオーバーの3つの状態を作成しようとしています。この状態のそれぞれがcss/div/buttonです。しかし、ボタンにラベルのテキストを保持するために、ラベルをボタンにしようとしています。

ページがズームされたときに画像が劣化しないように、jpgではなくcssを使用してください。

$(function() {
    $("input[name='domain_ext']").each(function() {
        if ($(this).prop('checked')) {
            $(this).hide();
            $(this).after("<div class='radioButtonOff'> label </div>");
        } else { 
            $(this).hide();
            $(this).after("<div class='radioButtonOff'> label </div>");
        }
    });

    $("input[type=radio]").change(function() {
        $(this).siblings('.radioButtonOff').add('.radioButtonOn').toggleClass('radioButtonOff radioButtonOn');
    });

        /*  
 $(".radioButtonOff").mouseover(function() {
       if ($(this)toggle('.radioButtonHover');
    });

  $("input[type=label]").change(function() {
         if($(this).find('#radiolabel');
            $(this).hide();
            $(this).after("input[type=label]").add(span);
         });
*/

});
4

2 に答える 2

2

このcssをChromeで動作させることができました。他のブラウザではテストしていませんが、まともなはずです。

label {position:relative; width:60px; height:20px; display:inline-block; line-height:20px; text-align:center;}
.radioButtonOff,.radioButtonHover,.radioButtonOn { width:100%; height:100%; position:absolute; z-index:-1; }
.radioButtonOff { background: #333333;}
.radioButtonHover { background: #666666;}
.radioButtonOn { background: #999999;}

例： http： //jsfiddle.net/P9m7q/

于 2013-03-12T03:51:00.990 に答える
2

Altered jQuery to simply pull the text from the label and add it to the dynamically appended div.

EDIT: I realize your if/else statement for the checked state was pointless since it wasn't altering anything at all based upon condition. You may have other plans for it, but based on the posted example, you could do away with the first portion of the jQuery entirely. I've made a small edit to the jquery code below.

 $("input[name='domain_ext']").each(function() {
    var lbl = $(this).parent("label").text();
    if ($(this).prop('checked')) {
        $(this).hide();
        $(this).after("<div class='radioButtonOn'>" + lbl + "</div>");
        // something else here if radio is checked??
    } else { 
        $(this).hide();
        $(this).after("<div class='radioButtonOff'>" + lbl + "</div>");
    }
});

Added a span to the label HTML to hide the text.

<label>
  <input type="radio" name="domain_ext" value="all"  />
    <span>All</span></label>

Changed CSS to allow hover state to work and hide label text.

.radioButtonOff { width: 60px; height: 20px; color: #fff; background: #333333;}
.radioButtonOff:hover, .radiobuttonOn:hover { width: 60px; color: #fff;height: 20px; background: #00a;}
.radioButtonOn { width: 60px; height: 20px; color: #fff;background: #a00;}
label span { display: none;}

Updated fiddle here

于 2013-03-12T03:39:05.010 に答える