上次单击的图像周围的边框

Border around last clicked image

本文关键字：周围 边框 图像 单击      更新时间：2023-09-26

我正在尝试使一些<img>元素的行为类似于<input type="radio">按钮(已经管理好了(，现在我需要通知用户他的选择。为此，我想围绕最后一个选定的图像进行border。

请注意，我有超过 1 行收音机，因此用户应该能够单击第一行中的一个图像(它应该保持突出显示(，然后他必须能够单击第二行，依此类推，同时他的选择保持突出显示。

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

示例代码

.images img:active {
    border:3px solid #000;
}
<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>

我会选择稍微不同的方法，不使用任何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;}

还有小提琴

解释

正确设置后，单击标签标签会选中关联的单选按钮/复选框(并将焦点放在其他类型的字段上(。我将这种默认行为与"相邻同级"CSS 选择器+和:checked伪选择器结合使用，以定位相邻标签及其img子标签。这样做的一个附加值是，您可以完全将其发布为表单，它将发布单选按钮值...

原则上

只需检测合格元素的

单击事件，从所有合格元素中删除表示选定状态的类，然后添加到单击的元素中。

$('.radioImg').on('click', function() {
  $('.radioImg').removeClass('selected')
  $(this).addClass('selected');
});
.radioImg.selected {
  border: 1px solid red;
}
<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' />

然而

如果你有多个这样的东西集，你可以包装在一个父元素中，将选择器更改为缩小，并使用同级从相邻项中删除类。这代表了一个更可重用的实现。

$('div .radioImg').on('click', function() {
  $(this).addClass('selected').siblings().removeClass('selected');
});
.radioImg.selected {
  border: 1px solid red;
}
<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>

您可以使用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" />

如此简单！您也可以在没有额外 CSS 的情况下做到这一点。

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

不知道你是如何让图像进入广播的，下面是一个完整的解决方案：

.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*/
}

希望对你有帮助

相关文章：