在jQuery中聚焦时如何更改边框标签

Question

我有一张图片清单。

<div class="modal-body" id='myModalImageContent'>
   @foreach (var image in ViewBag.images)
   {
   <label title="@image" id="imageItem" class="imageItem" data-url="@image">
    <img src="@Url.Content(image)" alt="@image" width="110" height="140">
   </label>
   }
</div>

当选择图像时，我有一个JQuery使其边框=>可以。 但是现在我想在边框失去焦点时删除边框，我使用跟随代码，但是不起作用。 有人知道如何解决吗？

$('.imageItem').click(function() {
    var $itemClicked = $(this);
    url = $itemClicked.attr('data-url');
    urlImage = url.substr(1);
    $(this).addClass('isClicked');
    $(this).blur(function() {
        alert('Bye');
        $(this).removeClass("isClicked");
        $(this).addClass('lossFocus');
    });
})
// When loss focus
$('.imageItem').focusout(function() { // I also tried with .blur               
    alert('Bye');
    $(this).removeClass("isClicked");
    $(this).addClass('lossFocus');
});

更新我的意思是，当我选择一个图像时，该图像是加粗的，而当我选择另一个图像时，我想要的是第一个图像将隐藏边框，第二个图像则是边框。

当前我现在面临的问题如下图：

Answer 1

您可以将hover与toggleClass一起使用。

 $('.imageItem').click(function() { $(this).addClass('isClicked'); $(this).hover( function() { $(this).toggleClass('isClicked lossFocus'); } ); }); 

 .isClicked { background-color: lightblue; } .lossFocus { background-color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label title="@image" id="imageItem" class="imageItem" data-url="@image"> Image tag </label> 

Answer 2

 $('.imageItem').click(function() { $(this).toggleClass('clicked'); }); 

 label{ width:200px; height:200px; } .clicked { background-color: blue; border:4px blue solid; display: block; } .clicked:hover { background-color: red; border:4px red solid; display: block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <label title="@image" id="imageItem" class="imageItem" data-url="@image"> <img src="https://picsum.photos/200/200?random"/> </label> </div> 

创建一个具有悬停效果的CSS类，然后将该类切换到所需的元素。

Answer 3

解决。 我为单击的图像添加标题，然后在单击另一幅图像时，找到带有标题==> set css的边框。

        $('.imageItem').click(function () {                
            url = $(this).attr('data-url');
            urlImage = url.substr(1);             
            $(this).attr('title', 'preimage')
            $(this).toggleClass('clicked');

        })
        $('img').click(function () {               
            $('[title="preimage"]').css('border', 'none');
        })