Question

 var cnt = document.getElementById('counter');
 //row1 is incremental and based on some value from 
 // database this value will increase. want to create a loop Here

$(".row1").mouseenter(function(){
    $(this).addClass("answer_hover_row");
    document.getElementById('row1').style.visibility = "visible";
}).mouseleave(function(){
    $(this).removeClass("answer_hover_row");
    document.getElementById('row1').style.visibility = "hidden";
});

$(".row2").mouseenter(function(){
    $(this).addClass("answer_hover_row");
    document.getElementById('row2').style.visibility = "visible";
}).mouseleave(function(){
    $(this).removeClass("answer_hover_row");
    document.getElementById('row2').style.visibility = "hidden";
});

我正在尝试为mouseenter函数创建一个循环，这样我就可以为动态打印的div创建它。 div的计数位于隐藏文本框中，id为counter。请帮我循环。 .each功能对我不起作用

Answer 1

假设您的标记看起来像这样：

<div class="row1">...</div>
<div class="row2">...</div>
...

你应该在div（或你使用的任何元素）中添加另一个类：

<div class="row1 entry_row">...</div>
<div class="row2 entry_row">...</div>
...

然后你可以迭代：

$('.entry_row').each(function() {
    var row = this;
    ...
});

或者在示例中添加hover：

$('.entry_row').hover(function() {
    $(this).addClass('answer_hover_row');
    this.style.visibility = 'visible';
}, function() {
    $(this).removeClass('answer_hover_row');
    this.style.visibility = 'hidden';
});

Answer 2

这就是你要找的东西

var cnt = parseInt($('#counter').val(),10);
for(var i=0;i<counter;i++){
    $(".row" + i).mouseenter(function(){
        $(this).addClass("answer_hover_row").show()
    }).mouseleave(function(){
        $(this).removeClass("answer_hover_row").hide()
    });
}

Answer 3

如果有cnt行数，每行有class =“row1”，class =“row2”等等，那么你可以使用这个jQuery（我切换到更紧凑的.hover（）函数）我假设行数来自你的计数器对象的innerHTML：

var cnt = parseInt(document.getElementById('counter').innerHTML, 10);
for (var i = 1; i <= cnt; i++) {
    $(".row" + i).hover(function(){
        $(this).addClass("answer_hover_row");
        this.style.visibility = "visible";
    }, function(){
        $(this).removeClass("answer_hover_row");
        this.style.visibility = "hidden";
    });
}

如果你只是在每一行放置相同的class="rowN"并且只使用这样的代码会更容易：

$(".rowN").hover(function(){
    $(this).addClass("answer_hover_row");
    this.style.visibility = "visible";
}, function(){
    $(this).removeClass("answer_hover_row");
    this.style.visibility = "hidden";
});

Answer 4

你的问题有点令人困惑。你使用id =“”和class =“”来标记相同的标签吗？你真的想在mouseOut上隐藏容器吗？无论如何，据我所知，你确实希望在某事上切换悬停事件。对此的纯jQuery解决方案看起来像这样：

$( 'DIV' ).hover(
    function () {  // MouseOver-Event
        $(this).addClass( 'answer_hover_row' );
        $( '#row1' ).show();
    },
    function () {  // MouseOut-Event
        $(this).removeClass( 'answer_hover_row' );
        $( '#row1' ).hide();
    }
);

我认为您可以使用非常短的代码，结合使用.toggle()，.toggleClass()和初始.hover()方法。未经测试的建议：

$( 'DIV' ).hover( function() { $(this).toggleClass( 'className' ).toggle(); } );

Answer 5

您可以通过一次选择所有行来迭代行，但是您需要为所有这些行添加一个额外的类，假设您添加了一个css类“hover-rows”，请执行以下操作：

   $('.hover-rows').each(function () {
      $(this).mouseenter(function(){
        $(this).addClass("answer_hover_row").css('visibility', ''visible');
      })
      .mouseleave(function(){
        $(this).removeClass("answer_hover_row").css('visibility', 'hidden');
      });
   });

想要根据值在jquery中创建一个循环

5 个答案: