Question

我不经常使用jQuery，但是当我使用它时，我很难过。我设法用非常基本的技巧写这个，但我想在此问你的帮助。

我想做一个清单，在你检查你想要的“td”之后，他们会继续检查，除非你再次推它，取消选中它。

所以基本上当你按下td 1b时它会显示在图片1中，当你按下td 2b时它会显示图片2，但是图片1会消失。我希望它能像它一样，你按1它显示图片1，你按2后它显示图片2和1.依此类推，如果你推这些td例如：1b，2b，3b你不想要再次显示图片2，你再次按td 2b，现在图片2消失，但图片1和3一直显示。如果可能的话，推td改变颜色，直到你“拔掉”它。

此外，我添加了B-R td来切换图片的颜色，推后，颜色切换和所有td重置。因此，在它改变颜色后，它基本上与其他颜色相同。

我很难解释，但简而言之：我想做清单，每个检查过的td显示一张图片，如果你取消选中一张图片，只有那张图片消失了。

你可以帮我这个吗？提前谢谢！

我的例子在这里：https://jsfiddle.net/mhz9n1yq/

jQuery代码很乱，但我能做到最好：

$(document).ready(function() {
  $(".1bc").on('click', function() {
    $(".1b").show();
    $(".2b").hide();
    $(".3b").hide();
    $(".4b").hide();
    $(".5b").hide();
    $(".6b").hide();
    $(".topb").hide();
  });
  $(".2bc").on('click', function() {
    $(".1b").hide();
    $(".2b").show();
    $(".3b").hide();
    $(".4b").hide();
    $(".5b").hide();
    $(".6b").hide();
    $(".topb").hide();
  });
  $(".3bc").on('click', function() {
    $(".1b").hide();
    $(".2b").hide();
    $(".3b").show();
    $(".4b").hide();
    $(".5b").hide();
    $(".6b").hide();
    $(".topb").hide();
  });
  $(".4bc").on('click', function() {
    $(".1b").hide();
    $(".2b").hide();
    $(".3b").hide();
    $(".4b").show();
    $(".5b").hide();
    $(".6b").hide();
    $(".topb").hide();
  });
  $(".5bc").on('click', function() {
    $(".1b").hide();
    $(".2b").hide();
    $(".3b").hide();
    $(".4b").hide();
    $(".5b").show();
    $(".6b").hide();
    $(".topb").hide();
  });
  $(".6bc").on('click', function() {
    $(".1b").hide();
    $(".2b").hide();
    $(".3b").hide();
    $(".4b").hide();
    $(".5b").hide();
    $(".6b").show();
    $(".topb").hide();
  });
});


$(document).ready(function() {
  $(".1rc").on('click', function() {
    $(".1r").show();
    $(".2r").hide();
    $(".3r").hide();
    $(".4r").hide();
    $(".5r").hide();
    $(".6r").hide();
    $(".topr").hide();
  });
  $(".2rc").on('click', function() {
    $(".1r").hide();
    $(".2r").show();
    $(".3r").hide();
    $(".4r").hide();
    $(".5r").hide();
    $(".6r").hide();
    $(".topr").hide();
  });
  $(".3rc").on('click', function() {
    $(".1r").hide();
    $(".2r").hide();
    $(".3r").show();
    $(".4r").hide();
    $(".5r").hide();
    $(".6r").hide();
    $(".topr").hide();
  });
  $(".4rc").on('click', function() {
    $(".1r").hide();
    $(".2r").hide();
    $(".3r").hide();
    $(".4r").show();
    $(".5r").hide();
    $(".6r").hide();
    $(".topr").hide();
  });
  $(".5rc").on('click', function() {
    $(".1r").hide();
    $(".2r").hide();
    $(".3r").hide();
    $(".4r").hide();
    $(".5r").show();
    $(".6r").hide();
    $(".topr").hide();
  });
  $(".6rc").on('click', function() {
    $(".1r").hide();
    $(".2r").hide();
    $(".3r").hide();
    $(".4r").hide();
    $(".5r").hide();
    $(".6r").show();
    $(".topr").hide();
  });
});


$(document).ready(function() {
  $(".br").on('click', function() {
    $(".2").show();
    $(".1").hide();
    $(".black").hide();
    $(".red").show();
    $(".1b").hide();
    $(".2b").hide();
    $(".3b").hide();
    $(".4b").hide();
    $(".5b").hide();
    $(".6b").hide();
    $(".topb").hide();
    $(".topr").show();
  });
  $(".rb").on('click', function() {
    $(".2").hide();
    $(".1").show();
    $(".black").show();
    $(".red").hide();
    $(".1r").hide();
    $(".2r").hide();
    $(".3r").hide();
    $(".4r").hide();
    $(".5r").hide();
    $(".6r").hide();
    $(".topr").hide();
    $(".topb").show();
  });
});

$(".2").hide(); $(".topr").hide();

$(".1b").hide(); $(".2b").hide(); $(".3b").hide(); $(".4b").hide(); $(".5b").hide(); $(".6b").hide();

$(".1r").hide(); $(".2r").hide(); $(".3r").hide(); $(".4r").hide(); $(".5r").hide(); $(".6r").hide();

Answer 1

您可以尝试使用.toggle（）

例如替换它：

$(".1bc").on('click', function() {
    $(".1b").show();
    $(".2b").hide();
    $(".3b").hide();
    $(".4b").hide();
    $(".5b").hide();
    $(".6b").hide();
    $(".topb").hide();
  });

用这个：

  $(".1bc").on('click', function() {
  $( ".1b" ).toggle();
});

您可以阅读有关here

的更多信息

您可以在此处查看工作示例： http://codepen.io/florinsimion/pen/EgKAGR

Answer 2

您应该使用.toggle()，但是看到您的代码我有一些关于如何更有效地使用jQuery的提示。

使用特定类选择具有相似行为的元素。
使用data属性来区分每个元素的具体行为

喜欢这样：

在您的代码中点击<td>会触发对其中一个图片的.toggle()效果，该行为会在您想要的所有<td>之间共享，因此不会创建{ {1}}绑定每个.click()元素，您可以将您的html更改为：

<td>

这样一旦你开火<td class="js_toggle-image" data-show=".1b" style="text-align:center">1b</td> <td class="js_toggle-image" data-show=".2b" style="text-align:center">2b</td> <td class="js_toggle-image" data-show=".3b" style="text-align:center">3b</td> <td class="js_toggle-image" data-show=".4b" style="text-align:center">4b</td> <td class="js_toggle-image" data-show=".5b" style="text-align:center">5b</td> <td class="js_toggle-image" data-show=".6b" style="text-align:center">6b</td>，它就会立刻绑定到所有这些。

另外如果您注意到我将$('.js_toggle-image').click()添加到td元素，我将使用它作为我要切换的特定图像的选择器，如下所示：

data-show=".1b"

我已使用此更新your fiddle以及利用多类选择器进行的其他一些更改。

干杯！

PS：当我使用的课程目的是通过JavaScript获取它时，我通常在其前面添加var toggleSelector; $(".js_toggle-image").on('click', function() { toggleSelector = $(this).data('show'); $(toggleSelector).toggle(); });，但这不是强制性的，它只是帮助我跟踪风格和行为的特定内容。

Answer 3

您可以尝试以下示例，只需单击要切换的单元格即可。您可以用自己的图片替换<span>。

$(document).ready(function() {
  $("td").children("div").toggle();
  $("td").click(function() {
    $(this).children("div").toggle();
  });
});

table,
td {
  border: 2px #000 solid;
  padding: 0;
}
td {
  cursor: pointer;
  width: 100px;
  height: 100px;
  background-color: #f00;
}
div {
  width: 100px;
  height: 100px;
  background-color: #fff;
}
span {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
</head>

<body>
  <table>
    <tr>
      <td>
        <div><span>1</span>
        </div>
      </td>
      <td>
        <div><span>2</span>
        </div>
      </td>
      <td>
        <div><span>3</span>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div><span>4</span>
        </div>
      </td>
      <td>
        <div><span>5</span>
        </div>
      </td>
      <td>
        <div><span>6</span>
        </div>
      </td>
    </tr>
  </table>
</body>

</html>

jQuery推送多个td并让它们“被推下”

3 个答案: