2

我正在努力实现这一目标，但它不起作用。

这是CSS表：

.input_hidden {
    position: absolute;
    left: -9999px;
}

.selected {
    background-color: #000000;
}

#carte label {
    border: inline-block;
    cursor: pointer;
}

#carte label img {
    padding: 3px;
}

HTML部分：

<div id="carte">
    Select a card:<BR>
    <input type=radio name="carte" id="cart1" class='input_hidden' />
    <label for="cart1">
       <img src="cart1.jpg" alt="carte1" />
    </label>
    <input type=radio name="carte" id="cart2" class='input_hidden' />
    <label for="cart2">
       <img src="cart1.jpg" alt="carte2" />
    </label>
    <input type=radio name="carte" id="cart3" class='input_hidden' />
    <label for="cart3">
       <img src="cart3.jpg" alt="carte3" />
    </label>
</div>

和javascript：

$('#carte label').click(function(){
    $(this).addClass('selected').siblings().removeClass('selected');
});

当我将选定的类分配给图像时，它是好的，我看到它带有黑色边框。但似乎分配类的javascript部分不起作用。我还有其他方法可以为图像分配正确的类吗？谢谢你的支持。

4

2 回答 2

2

您确定要使用 jQuery 吗？

使用理智的浏览器，您可以使用纯 css 解决它：http: //jsfiddle.net/VSR86/4/

HTML：

<div id="carte">

    <label>
        <input type="radio" name="carte" value="cart1" >
        <img src="http://placekitten.com/100/100">
    </label>
    ...

CSS：

label input + img {
  border: 10px solid transparent;
}

label input:checked + img {
  border: 10px solid blue;
}

当然，IE8 和更早版本需要一些 javascript 后备。

https://developer.mozilla.org/en-US/docs/Web/CSS/:checked

IE8 修复

更新的 CSS：

label input.checked + img,
label input:checked + img {
  border: 10px solid blue;
}

JS 后备：

if(/* this browser is IE8 or worse */){

  $(document).on('click','label:has(input[type="radio"])',function(){
      var $r = $(this).find('input');
      adjustRadio( $r.attr('name'), $r.val(), 'checked');
  });

}


function adjustRadio( name, value, className ){
  // wait for other event handlers to run
  setTimeout( function(){
    $('input[type="radio"][name="'+name+'"]').each( function(){
      var $r = $(this);
      $r.toggleClass( className, $r.val() === value );
    });
  },1);
}
于 2013-09-20T07:25:21.367 回答
1

为了简单起见，您可以使用该toggleClass功能:)

http://api.jquery.com/toggleClass/

由于人们很挑剔，先生，这里有一个小提琴给你

http://jsfiddle.net/8B3SW/1/

$('#carte label').click(function(){
    $(this).toggleClass('selected').siblings().removeClass('selected');;
});
于 2013-09-20T07:14:51.447 回答