Question

我试图让一些<img>元素的行为类似于<input type="radio">按钮（已经管理过），现在我需要告知用户他的选择。要做到这一点，我想在最后选择的图像周围border。

请注意，我有超过1行无线电，因此用户应该可以点击第一行中的一张图像（它应该保持高亮显示）然后他必须能够点击第二行，依此类推他的选择仍然很突出。

.product-info .option img:active
{
    border:1px solid #d9d1d5;
}

示例代码

＆＃13;

.images img:active {
    border:3px solid #000;
}

＆＃13;

<div class="images">
    <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
</div>

＆＃13;

Answer 1

原则上

只需检测限定元素的click事件，从所有限定元素中删除表示所选状态的类，然后添加到单击的元素中。

＆＃13;

$('.radioImg').on('click', function() {
  $('.radioImg').removeClass('selected')
  $(this).addClass('selected');
});

＆＃13;

.radioImg.selected {
  border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<img class='radioImg' src='https://www.gravatar.com/avatar/f62f93c13e2aad52fa08a693ce13da48?s=32&d=identicon&r=PG&f=1' />
<img class='radioImg' src='https://www.gravatar.com/avatar/f62f93c13e2aad52fa08a693ce13da48?s=32&d=identicon&r=PG&f=1' />
<img class='radioImg' src='https://www.gravatar.com/avatar/f62f93c13e2aad52fa08a693ce13da48?s=32&d=identicon&r=PG&f=1' />

＆＃13;

然而

如果你有多组这类东西，你可以在父元素中包装，更改选择器以缩小它，并使用兄弟姐妹从相邻的项中删除类。这代表了一种更加可重用的实现。

＆＃13;

$('div .radioImg').on('click', function() {
  $(this).addClass('selected').siblings().removeClass('selected');
});

＆＃13;

.radioImg.selected {
  border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <img class='radioImg' src='https://www.gravatar.com/avatar/f62f93c13e2aad52fa08a693ce13da48?s=32&d=identicon&r=PG&f=1' />
  <img class='radioImg' src='https://www.gravatar.com/avatar/f62f93c13e2aad52fa08a693ce13da48?s=32&d=identicon&r=PG&f=1' />
  <img class='radioImg' src='https://www.gravatar.com/avatar/f62f93c13e2aad52fa08a693ce13da48?s=32&d=identicon&r=PG&f=1' />
</div>

＆＃13;

Answer 2

我会采用稍微不同的方法，而不是使用任何JavaScript。基本的想法是你想模仿单选按钮，所以让我们使用单选按钮（和标签）功能......

<强> HTML

<div class="images">
    <input type="radio" name="test" value="1" id="test1">
    <label for="test1">
        <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    </label>
    <input type="radio" name="test" value="2" id="test2">
    <label for="test2">
        <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    </label>
    <input type="radio" name="test" value="3" id="test3">
    <label for="test3">
        <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    </label>
    <input type="radio" name="test" value="4" id="test4">
    <label for="test4">
        <img src="https://cdn.tutsplus.com/net/uploads/legacy/958_placeholders/placehold.gif">
    </label>
</div>

<强> CSS

input[type="radio"] {display:none;}
input[type="radio"]:checked+label img {border:3px solid #000;}

And the fiddle

<强>解释

正确设置后，单击标签标签会检查相关的radiobutton / checkbox（并将焦点放在其他类型的字段上）。我使用此默认行为结合“相邻兄弟”CSS选择器+和:checked伪选择器来定位相邻标签及其img子项。这个的附加价值是你可以将它完全发布为一个表单，它将发布radiobutton值......

Answer 3

您可以使用jquery并检查图像具有特定类的内容：

$("img").on("click", function() {
  //remove from all images imgClicked class
  $("img").removeClass("imgClicked");
  //add class to click image element
  $(this).addClass("imgClicked");
});

.imgClicked {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=20%C3%9720&w=20&h=20" />
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=20%C3%9720&w=20&h=20" />
<img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=20%C3%9720&w=20&h=20" />

Answer 4

太简单了！你也可以在没有额外的CSS的情况下做到这一点。

$('.radioImg').on('click', function() {
  $('.radioImg').css("border","none")
  $(this).css("border","1px solid blue")
});

Answer 5

不知道如何制作图像去广播，下面是一个完整的解决方案：

HTML ..

<label class="pinLabel"><input type="radio" name="radios" /><img src="abc.jpg" />Label Text </label>

CSS ..

label.pinLabel > input{
display:none;
}

label.pinLabel > input:checked + img{
border :1px solid red;
}

 label.pinLabel > input + img{
 cursor:pointer;
 /* Rest default properties for image*/
}

label.pinLabel > input + img:hover{
cursor:pointer;
 /* Rest default properties for image on hover*/
}

label.pinLabel > input:disabled + img{
cursor: not-allowed;
 /* Rest default properties for image when Disabled*/
}

希望有所帮助

最后点击图片周围的边框

5 个答案:

原则上

然而