Question

在悬停时它工作正常，但点击该类仍然存在我想在点击具有相同元素的另一个图像后删除边框

 DECLARE
  v_pertags dmo_person.per_tags%TYPE;
  v_json_obj JSON_OBJECT_T;
  v_new_pertags dmo_person.per_tags%TYPE;
BEGIN
  SELECT per_tags
  INTO   v_pertags
  FROM   dmo_person; --where clause
  v_json_obj := TREAT(json_element_t.PARSE(v_pertags) AS json_object_t);
  v_json_obj.PUT('perm_bigboss' , 1);
  v_json_obj.PUT('perm_admin', 0);
  v_new_pertags := v_json_obj.to_string;

UPDATE dmo_person
  SET    per_tags = v_new_pertags; --where clause
END;
/

喜欢悬停的工作原理

$('img').on('click', function(e) {
  $(this).toggleClass('active');
  e.preventDefault();    
});

https://jsfiddle.net/cqzoh36h/

Answer 1

除了点击的

之外，您需要从其他img标记中删除该类

// keep reference to all img tags collection
var $ele = $('img').on('click', function(e) {
  // use addClass to add class, use toggleClass if you want to toggle on each click
  $(this).addClass('active');
  // filter out img except clicked and
  // remove the class
  $ele.not(this).removeClass('active');
  e.preventDefault();
});

.active {
  border: 1px solid #333
}

img {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://vignette.wikia.nocookie.net/pokemon/images/1/15/007Squirtle_XY_anime.png/revision/latest?cb=20140916184418" />
<img src="https://vignette.wikia.nocookie.net/pokemon/images/1/15/007Squirtle_XY_anime.png/revision/latest?cb=20140916184418" />

使用hover()方法可以正常工作，因为在mousenter和mouseleave事件上都会调用回调，实际上是它的短处理程序。

Answer 2

删除所有img onclick的boder并将类边框分配给被点击的元素

$('img').click(function() {
  $('img').removeClass('border');
  $(this).toggleClass('border');
});

.border {
  border: 1px solid #333
}

img {
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://vignette.wikia.nocookie.net/pokemon/images/1/15/007Squirtle_XY_anime.png/revision/latest?cb=20140916184418" />
<img src="https://vignette.wikia.nocookie.net/pokemon/images/1/15/007Squirtle_XY_anime.png/revision/latest?cb=20140916184418" />

如何在点击时切换班级

2 个答案: