如何在 jquery 中单击时更改文本和方形矩形？答案

【问题标题】：How to change text and square rectangle on click in jquery?如何在 jquery 中单击时更改文本和方形矩形？
【发布时间】：2018-09-22 00:36:54
【问题描述】：

我有一个如下所示的屏幕截图，我在 HTML/CSS 中复制了它。

我为上面的截图创建了fiddle。使用 Bootstrap 4 制作行和表。

我在小提琴中使用的 HTML 和 JQuery 代码的 sn-ps 是：

HTML：

    <tr>
         <td class="left">Fred Doe's Guest 1</td>
         <td class="number1">250</td>
         <td class="table1">2</td>
         <td class="right-itemswaiting">
         <div class="square-white"></div>
         <span class="items-waiting">Items Waiting</span>
         </td>
   </tr>

JQuery：

  $(document).ready(function () {
    var fold = $("#fold");
    fold.cliked = 1;
    fold.click(function () {
        $(".items-waiting").text((fold.cliked++ % 2 == 0) ? "Items Waiting" : "Items Received");
    });
});

以上 HTML 和 JQUery 代码取自 fiddle。 JQuery 中使用的折叠元素（第 2 行）在 HTML 中不存在，因为我不确定如何在那里准确地使用它。

问题陈述：

我想知道我需要在 JQuery 代码中添加什么，以便单击 Items waiting 彩色框（在屏幕截图中用箭头标记），文本应该从 Items waiting 到 收到的物品。此外，实心白色背景方块应替换为未填充白色方块。

【问题讨论】：

您提供的第一个小提琴只使用纯Javascript。
@Hikarunomemory 是的，HTML 中没有折叠元素。我想知道如何将其放入 HTML 中。
@Hikarunomemory It JQuery，我不知道如何在小提琴中启用它。
javascript 块上方有一个下拉列表。在FRAMEWORKS & EXTENSIONS中选择jQuery

标签： jquery html css

【解决方案1】：

改变这一行

<span class="items-waiting">Items Waiting</span>

到

<span id = "fold" class="items-waiting">Items Waiting</span>

编辑：正如我所见，您想要使用多个元素来单击，您需要使用类而不是 ID...我已经相应地更新了小提琴。

https://jsfiddle.net/nc2djn5p/173/

【讨论】：

我试过了，但由于一些原因它不起作用。我想知道你是否可以在我提供的小提琴中更新它。
另外，在小提琴中，我不确定如何打开 JQuery 库。
您需要从下拉列表中选择 jQuery 以启用 jQuery。
嗨，我有一个简单的问题。在我的电脑中，文本更改发生在双击时。有什么理由吗？
让我们continue this discussion in chat.

【解决方案2】：

在我看来，我发现有一些事情需要改变。

不仅要切换square，还应删除sibling 的类items-waiting。并且<td> 中的right-itemswaiting 类也应更改为right-itemsreceived。

所以这是一个仅适用于类square-white 的正方形的示例。单击它后，它会更改并且不会再次触发。您可以在此基础上制作您的版本。

$(document).ready(function() {
  $('body').on('click', '.square-white', function() {
    var $this = $(this)
    $this.toggleClass('square square-white')
    $this.siblings().removeClass('items-waiting').text('Items Received')
    $this.parent().toggleClass('right-itemswaiting right-itemsreceived')
  })
});

// General CSS
.nav-top-searchbar {
  position: relative;
}

#ellipsis {
  top: 12px;
  position: absolute;
  right: 43px;
  cursor: pointer;
}

#ellipsis:focus {
  outline: none;
}

#ellipsis:focus+.dropdown {
  display: block;
}

input[type=text] {
  width: 100%;
  background: #10314c;
}

.dropdown {
  background-color: #FFFFFF;
  display: none;
  /* padding-left: 2%; */
  position: absolute;
  /* height: 150px; */
  right: 0;
  width: 200px;
  z-index: 10;
  list-style-type: none;
  padding-top: 25px;
  padding-bottom: 25px;
  box-shadow: 0 0 15px #888;
  top: 2px;
}

.searchicon {
  float: left;
  margin-top: -20px;
  position: relative;
  top: 26px;
  left: 8px;
  color: white;
  border: 1px solid #FFFFFF;
  z-index: 2;
  padding: 3px;
}

.table td,
.table th {
  border-top: none ! important;
  padding-left: 3%;
}

.table thead th {
  border-bottom: none ! important;
}

.table td.left {
  padding-right: 32%;
}

.dropdown a {
  color: #676767;
  font-weight: bold;
  font-size: 14px;
}

.dropdown li {
  padding-left: 20px;
}

.dropdown li:hover {
  background-color: #EDEDED;
}

.body-manage-attendees tbody tr:hover {
  background-color: #EDEDED;
}

.body-manage-attendees .number {
  padding-left: 2%;
  padding-right: 6%;
}

.body-manage-attendees .table1 {
  padding-left: 1%;
  text-align: center;
  padding-right: 6%;
}

.body-manage-attendees .table2 {
  padding-left: 1%;
  text-align: center;
  padding-right: 6%;
}

.body-manage-attendees .status {
  padding-left: 1%;
  text-align: center;
}

.body-manage-attendees .right {
  padding-left: 1%;
  text-align: center;
}

.body-manage-attendees .right-bill {
  padding-left: 1%;
  color: white;
  text-align: center;
  background-color: #1173B7;
}

.body-manage-attendees .right-nobill {
  padding-left: 1%;
  text-align: center;
  color: black;
}

.body-manage-attendees .right-unapid {
  padding-left: 1%;
  color: white;
  text-align: center;
  background-color: #1173B7;
}

.body-manage-attendees .right-itemsreceived {
  padding-left: 1%;
  color: white;
  text-align: center;
  background-color: #10314C;
}

.body-manage-attendees .right-itemswaiting {
  padding-left: 1%;
  text-align: center;
  color: white;
  background-color: #10314C;
}

.body-manage-attendees .right-unpaid {
  padding-left: 1%;
  color: white;
  background-color: #1173B7;
  text-align: center;
}

.nav-top-bar {
  display: flex;
  justify-content: space-between;
  padding: 0% 2.5%;
  background: rgb(16, 49, 76);
  align-items: center;
}

.square {
  display: inline-block;
  border-radius: 5px;
  border: 1px solid white;
  margin-right: 5%;
  height: 15px;
  width: 15px;
  vertical-align: middle;
}

.right-itemsreceived span {
  vertical-align: middle;
  padding-left: 5px;
}

.square-white {
  display: inline-block;
  border-radius: 5px;
  border: 1px solid white;
  background-color: white;
  height: 15px;
  margin-right: 10%;
  width: 15px;
  vertical-align: middle;
}

.right-itemswaiting span {
  vertical-align: middle;
  padding-left: 1%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body-manage-attendees">
  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col" class="number">Number</th>
        <th scope="col" class="table2">Table</th>
        <th scope="col" class="status">Status</th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td class="left">Eve Doe</td>
        <td class="number1">250</td>
        <td class="table1">4</td>
        <td class="right-itemsreceived">Items Received</td>
      </tr>
      <tr>
        <td class="left">Fred Doe</td>
        <td class="number1">250</td>
        <td class="table1">2</td>
        <td class="right-itemsreceived">
          <div class="square"></div><span>Items Received</span>
        </td>
      </tr>
      <tr>
        <td class="left">Fred Doe's Guest 1</td>
        <td class="number1">250</td>
        <td class="table1">2</td>
        <td class="right-itemswaiting">
          <div class="square-white"></div>
          <span class="items-waiting">Items Waiting</span>
        </td>
      </tr>
      <tr>
        <td class="left">Jack Doe</td>
        <td class="number1">14</td>
        <td class="table1">4</td>
        <td class="right-unpaid">Unpaid</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

【解决方案3】：

将“折叠”id 应用到您要定位的 td，或者您可以应用类名多个项目，只需输入以下 jQuery 代码。

我使用$(this) 仅将未点击所有 id/class 的项目定位为“折叠”

$(document).ready(function () {
    var fold = $(".mychanger");
    fold.cliked = 1;
    $.fn.textChange = function() {
        
    fold.click(function () {
        $(this).find(".items-waiting").text((fold.cliked++ % 2 == 0) ? "Items Waiting" : "Items Received");
        $(this).find(".square-white").toggleClass("transclass");
    });
    };
    
});

    // General CSS
.nav-top-searchbar {
    position: relative;
}

#ellipsis {
    top: 12px;
    position: absolute;
    right: 43px;
    cursor: pointer;
}

#ellipsis:focus {
    outline: none;
}

#ellipsis:focus+.dropdown {
    display: block;
}

input[type=text] {
    width: 100%;
    background: #10314c;
}

.dropdown {
    background-color: #FFFFFF;
    display: none;
    /* padding-left: 2%; */
    position: absolute;
    /* height: 150px; */
    right: 0;
    width: 200px;
    z-index: 10;
    list-style-type: none;
    padding-top: 25px;
    padding-bottom: 25px;
    box-shadow: 0 0 15px #888;
    top: 2px;
}

.searchicon {
    float: left;
    margin-top: -20px;
    position: relative;
    top: 26px;
    left: 8px;
    color: white;
    border: 1px solid #FFFFFF;
    z-index: 2;
    padding: 3px;
}

.table td,
.table th {
    border-top: none! important;
    padding-left: 3%;
}

.table thead th {
    border-bottom: none! important;
}

.table td.left {
    padding-right: 32%;
}

.dropdown a {
    color: #676767;
    font-weight: bold;
    font-size: 14px;
}

.dropdown li {
    padding-left: 20px;
}

.dropdown li:hover {
    background-color: #EDEDED;
}

.body-manage-attendees tbody tr:hover {
    background-color: #EDEDED;
}

.body-manage-attendees .number {
    padding-left: 2%;
    padding-right: 6%;
}

.body-manage-attendees .table1 {
    padding-left: 1%;
    text-align: center;
    padding-right: 6%;
}

.body-manage-attendees .table2 {
    padding-left: 1%;
    text-align: center;
    padding-right: 6%;
}

.body-manage-attendees .status {
    padding-left: 1%;
    text-align: center;
}

.body-manage-attendees .right {
    padding-left: 1%;
    text-align: center;
}

.body-manage-attendees .right-bill {
    padding-left: 1%;
    color: white;
    text-align: center;
    background-color: #1173B7;
}

.body-manage-attendees .right-nobill {
    padding-left: 1%;
    text-align: center;
    color: black;
}

.body-manage-attendees .right-unapid {
    padding-left: 1%;
    color: white;
    text-align: center;
    background-color: #1173B7;
}

.body-manage-attendees .right-itemsreceived {
    padding-left: 1%;
    color: white;
    text-align: center;
    background-color: #10314C;
}

.body-manage-attendees .right-itemswaiting {
    padding-left: 1%;
    text-align: center;
    color: white;
    background-color: #10314C;
}

.body-manage-attendees .right-unpaid {
    padding-left: 1%;
    color: white;
    background-color: #1173B7;
    text-align: center;
}

.nav-top-bar {
    display: flex;
    justify-content: space-between;
    padding: 0% 2.5%;
    background: rgb(16, 49, 76);
    align-items: center;
}

.square {
  display: inline-block;
  border-radius: 5px;
  border: 1px solid white;
  margin-right: 5%;
  height: 15px;
  width: 15px;
  vertical-align: middle;
}

.right-itemsreceived span{
    vertical-align: middle;
    padding-left: 5px;
}


.square-white {
    display: inline-block;
    border-radius: 5px;
    border: 1px solid white;
    background-color: white;
    height: 15px;
    margin-right: 10%;
    width: 15px;
    vertical-align: middle;
}


.right-itemswaiting span {
    vertical-align: middle;
    padding-left: 1%;
}

.transclass{
  background-color:transparent !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body-manage-attendees">
    <table class="table table-hover">
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col" class="number">Number</th>
                <th scope="col" class="table2">Table</th>
                <th scope="col" class="status">Status</th>
            </tr>
        </thead>
        <tbody>
            
            <tr>
                <td class="left">Eve Doe</td>
                <td class="number1">250</td>
                <td class="table1">4</td>
                <td class="right-itemsreceived">Items Received</td>
            </tr>
            <tr>
                <td class="left">Fred Doe</td>
                <td class="number1">250</td>
                <td class="table1">2</td>
                <td class="right-itemsreceived"><div class="square"></div><span>Items Received</span></td>
            </tr>
            <tr>
                <td class="left">Fred Doe's Guest 1</td>
                <td class="number1">250</td>
                <td class="table1">2</td>
                <td onclick="$(this).textChange();" id="fold" class="mychanger right-itemswaiting"><div class="square-white"></div><span  class="items-waiting">Items Waiting</span></td>
            </tr>
            <tr>
                <td class="left">Jack Doe</td>
                <td class="number1">14</td>
                <td class="table1">4</td>
                <td class="right-unpaid">Unpaid</td>
            </tr>
        </tbody>
    </table>
</div>

【讨论】：

@developer kt 我在使用 angular 5 时添加了一个点击方法。我所做的是<td id="fold" (click)="textChange()" class="right-itemswaiting"> <div class="square-white"></div><span class="items-waiting">Items Waiting</span></td>
@developer kt 在 ts(typescript) 中，我调用了 textChange(){ $(document).ready(function () { var fold = $("#fold"); fold.cliked = 1; fold.click(function () { $(this).find(".items-waiting").text((fold.cliked++ % 2 == 0) ? "Items Waiting" : "Items Received"); $(this).find(".square-white").toggleClass("transclass"); }); }); } 方法，但由于某些原因，文本更改只发生一次，而它应该一次又一次地发生。
文本更改只发生一次，在再次点击changed text 后不会回到original text。
问题是，当您单击时，它分配 fold.cliked = 1;然后 fold.clicked++;所以每次点击都会得到 2 次，这就是为什么我把这两行 var fold = $(".mychanger"); fold.clicked = 1;功能之外