Question

$(document).ready(function() {
  var nr = 0;
  $("#raspuns").text(nr);
  $("#t1 #e1").on({
    mouseover: function() {
      $(this).css("background-color", "yellow");
    },
    mouseleave: function() {
      $(this).css("background-color", "green");
    },
    click: function() {
      $(this).off('mouseleave');
      $("#t1 #e1").off('mouseleave');
      $("#t1 #e2").off('mouseleave');
      $("#t1 #e3").off('mouseleave');
      $("#t1 #e4").off('mouseleave');
      $(this).off('mouseover');
      $("#t1 #e1").off('mouseover');
      $("#t1 #e2").off('mouseover');
      $("#t1 #e3").off('mouseover');
      $("#t1 #e5").off('mouseover');
      $(this).off('click');
      $("#t1 #e4").off('click');
      $("#t1 #e2").off('click');
      $("#t1 #e3").off('click');
      $("#t1 #e5").off('click');
      nr = 1;
      $("#raspuns").text(nr);
    }
  });

  $("#t1 #e2").on({
    mouseover: function() {
      $(this).css("background-color", "yellow");
      $("#t1 #e1").css("background-color", "yellow");
    },
    mouseleave: function() {
      $(this).css("background-color", "green");
      $("#t1 #e1").css("background-color", "green");
    },
    click: function() {
      $(this).off('mouseleave');
      $("#t1 #e1").off('mouseleave');
      $("#t1 #e5").off('mouseleave');
      $("#t1 #e3").off('mouseleave');
      $("#t1 #e4").off('mouseleave');
      $(this).off('mouseover');
      $("#t1 #e1").off('mouseover');
      $("#t1 #e5").off('mouseover');
      $("#t1 #e3").off('mouseover');
      $("#t1 #e4").off('mouseover');
      $(this).off('click');
      $("#t1 #e4").off('click');
      $("#t1 #e1").off('click');
      $("#t1 #e3").off('click');
      $("#t1 #e5").off('click');
      nr = 2;
      $("#raspuns").text(nr);
    }
  });
  $("#t1 #e3").on({
    mouseover: function() {
      $(this).css("background-color", "yellow");
      $("#t1 #e1").css("background-color", "yellow");
      $("#t1 #e2").css("background-color", "yellow");
    },
    mouseleave: function() {
      $(this).css("background-color", "green");
      $("#t1 #e1").css("background-color", "green");
      $("#t1 #e2").css("background-color", "green");
    },
    click: function() {
      $(this).off('mouseleave');
      $("#t1 #e1").off('mouseleave');
      $("#t1 #e2").off('mouseleave');
      $("#t1 #e5").off('mouseleave');
      $("#t1 #e4").off('mouseleave');
      $(this).off('mouseover');
      $("#t1 #e1").off('mouseover');
      $("#t1 #e2").off('mouseover');
      $("#t1 #e5").off('mouseover');
      $("#t1 #e4").off('mouseover');
      $(this).off('click');
      $("#t1 #e4").off('click');
      $("#t1 #e2").off('click');
      $("#t1 #e1").off('click');
      $("#t1 #e5").off('click');
      nr = 3;
      $("#raspuns").text(nr);
    }
  });
  $("#t1 #e4").on({
    mouseover: function() {
      $(this).css("background-color", "yellow");
      $("#t1 #e1").css("background-color", "yellow");
      $("#t1 #e2").css("background-color", "yellow");
      $("#t1 #e3").css("background-color", "yellow");
    },
    mouseleave: function() {
      $(this).css("background-color", "green");
      $("#t1 #e1").css("background-color", "green");
      $("#t1 #e2").css("background-color", "green");
      $("#t1 #e3").css("background-color", "green");
    },
    click: function() {
      $(this).off('mouseleave');
      $("#t1 #e1").off('mouseleave');
      $("#t1 #e2").off('mouseleave');
      $("#t1 #e3").off('mouseleave');
      $("#t1 #e5").off('mouseleave');
      $(this).off('mouseover');
      $("#t1 #e1").off('mouseover');
      $("#t1 #e2").off('mouseover');
      $("#t1 #e3").off('mouseover');
      $("#t1 #e5").off('mouseover');
      $(this).off('click');
      $("#t1 #e1").off('click');
      $("#t1 #e2").off('click');
      $("#t1 #e3").off('click');
      $("#t1 #e5").off('click');
      nr = 4;
      $("#raspuns").text(nr);
    }
  });
  $("#t1 #e5").on({
    mouseover: function() {
      $(this).css("background-color", "yellow");
      $("#t1 #e1").css("background-color", "yellow");
      $("#t1 #e2").css("background-color", "yellow");
      $("#t1 #e3").css("background-color", "yellow");
      $("#t1 #e4").css("background-color", "yellow");
    },
    mouseleave: function() {
      $(this).css("background-color", "green");
      $("#t1 #e1").css("background-color", "green");
      $("#t1 #e2").css("background-color", "green");
      $("#t1 #e3").css("background-color", "green");
      $("#t1 #e4").css("background-color", "green");
    },
    click: function() {
      $(this).off('mouseleave');
      $("#t1 #e1").off('mouseleave');
      $("#t1 #e2").off('mouseleave');
      $("#t1 #e3").off('mouseleave');
      $("#t1 #e4").off('mouseleave');
      $(this).off('mouseover');
      $("#t1 #e1").off('mouseover');
      $("#t1 #e2").off('mouseover');
      $("#t1 #e3").off('mouseover');
      $("#t1 #e4").off('mouseover');
      $(this).off('click');
      $("#t1 #e1").off('click');
      $("#t1 #e2").off('click');
      $("#t1 #e3").off('click');
      $("#t1 #e5").off('click');
      nr = 5;
      $("#raspuns").text(nr);
    }
  });
});

div {
  height: 50px;
  width: 200px;
  background: green;
}
table {
  border-color: black;
  border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <script>
  </script>
</head>

<body style="background-color : #90C3D4">
  <table id="t1" border="1" cellspacing="0" cellpadding="0">
    <tr>
      <td>
        <div id="e1"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="e2"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="e3"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="e4"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="e5"></div>
      </td>
    </tr>
  </table>
  <p id="raspuns"></p>
</body>

</html>

大家好，我做了一个选择器，可以选择表的某些部分，现在我想创建一个函数，使5个表具有随机数行（例如：5个表有4行），如果我们选择的话从第三个表中的一些元素然后表1和表2自动选择，依此类推，something like this

给我一些想法或一些代码。谢谢。

Answer 1

有人评论说，你可以在同一行中使用多个jQuery选择器，因为你对所有人使用相同的动作：

$("#e1, #e2, #e3, #e4").off('mouseleave');

此外，如果您要删除所有事件，您可以不使用参数，它将删除所有事件：

$("#e1, #e2, #e3, #e4, #t1").off();

这就是你如何在一个动作上处理多个jQuery元素：

var createLines = function(table, randomNumber) {
    for (var i = 1; i <= randomNumber; i++) {
        $('<tr>')
            .addClass('row' + i)
            .appendTo(table)
            .attr('isSelected', 'no')
            .click(clickFunction)
    }
};

var createTables = function(randomNumber) {
    var table = $('<table>');

    createLines(table, randomNumber);
    table.appendTo('body');
};

var clickFunction = function() {
    var $el = $(this);
    var elClass = $el.attr('class');
    var isSelected = $el.attr('isSelected');

    if (isSelected === 'yes') {
        $('.' + elClass).css('background', 'white');
        $el.attr('isSelected', 'no');
    } else {
        $('.' + elClass).css('background', 'yellow');
        $el.attr('isSelected', 'yes');
    }
};

$(document).ready(function() {
    // 1 to 10
    var randomNumber = Math.floor((Math.random() * 10) + 1);

    for (i = 1; i <= 4; i++) {
        createTables(randomNumber);
    }
});

实例：HTML5 rocks intro to Promises

JQuery函数，用于创建具有某些属性的表

1 个答案: