Question

我有一组ID来自“c1”，“c2”，“c3”等的div。我想将一个类添加到ID为“b1”，“b2”，“ b3“当悬停其中一个div时。因此c1对应于b1，c2对应于b2，依此类推。

在jQuery中执行此操作的最佳方法是什么？

我一直试图在jsFiddle上试验一些代码 - 显然我无法让它发挥作用。

HTML：

<div id="c1" class="event">c1</div>
<div id="c2" class="event">c2</div>
<div id="c3" class="event">c3</div>

<div id="t1" class="target">t1</div>
<div id="t2" class="target">t2</div>
<div id="t3" class="target">t3</div>

JS：

$('.event').hover(function() {
  var getID = $(this).attr('id'); // get event ID
  $(".target").each(function() {
    var getTargetID = $(this).attr('id'); // get target ID
    $("#" + $(this).attr('id') + xxx).addClass('newClas'); // <--- how to map the corresponding elements?
  });
});

这是正确的方法吗？

Answer 1

您可以使用.index()来实现它，并使用.eq()来获取索引处的元素。无需依赖ID。

var targets = $(".target").removeClass('newClass');
var events = $('.event');
events.hover(function() {
    //Get current element index
    var index = events.index(this);

    targets.eq(index).addClass('newClass');
}, function() {
    targets.removeClass('newClass');
});

Updated Fiddle

如果您仍想使用ID

events.hover(function() {
    var number = this.id.match(/\d+/)[0];
    $('#t' + number).addClass('newClass');
});

Updated Fiddle

Answer 2

你不能只做这样的事情：

$('[id^=c]').on('hover',function() {
  var hoverIDnumber = $(this).attr('id').charAt($(this).length -1);
  $('#b'+hoverIDnumber+'').addCass('newclass');
})

Answer 3

  $(".target").removeClass('newClass');
  $('.event').hover(function() {
     var getID = $(this).attr('id').replace('c','t'); // get event ID

      $('#'+getID+'').addCLass('newClas');
  });

Answer 4

我使用数据标签来达到预期的效果。获取悬停元素的ID并找到具有相应data-id

的元素

$('.event').on('mouseover', function() {
  var getID = $(this).attr('id'); // get event ID
  $("[data-id='" + getID + "']").toggleClass('newClass')
});

请参阅html的小提琴：

https://jsfiddle.net/ux9muxzq/1/

Answer 5

以下方法运行正常。我的假设是targetId可以很容易地从sourceId得出。

＆＃13;

$('.event').hover(function() {
  var sourceID = $(this).attr('id');
  var targetID = "t" + sourceID.substring(1); // tune this for your actual ids
  $(".target").removeClass('newClass');
  $("#" + targetID).addClass('newClass');
});

＆＃13;

.event    { background: #ddf; margin: 2px }
.target   { background: #dfd; margin: 2px }
.newClass { border: 3px solid black }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="c1" class="event">c1</div>
<div id="c2" class="event">c2</div>
<div id="c3" class="event">c3</div>
<br>
<div id="t1" class="target">t1</div>
<div id="t2" class="target">t2</div>
<div id="t3" class="target">t3</div>

＆＃13;

Answer 6

在所有mouseenter（div.event）

$('.event')

存储this（var idx = $(this).index()）
使用.eq()和idx-1作为参数来查找div.target（$('.target').eq(idx-1)）
然后将课程添加到其中（.addClass('b'+idx));）
如果您想要进行临时班级更改，请将.on('mouseenter',替换为.hover(。

段

＆＃13;

$('.event').on('mouseenter', function() {
  var idx = $(this).index();
  $('.target').eq(idx - 1).addClass('b' + idx);
});

＆＃13;

.b1,
.b2,
.b3 {
  color: #930;
  background: rgba(0, 0, 0, .3);
}
div {
  margin: 10px auto;
  background: rgba(0, 0, 0, 1);
  color: #DED;
  cursor: pointer;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="c1" class="event">c1</div>
<div id="c2" class="event">c2</div>
<div id="c3" class="event">c3</div>

<div id="t1" class="target">t1</div>
<div id="t2" class="target">t2</div>
<div id="t3" class="target">t3</div>

＆＃13;

找到相应的元素

6 个答案:

段