javascript - 带有 CSS 效果的 JQuery Ui .effect 不起作用

Question

此表的行有 2 个元素。一种类型是文本，另一种类型是隐藏的。如果这些元素的值是 different.jQuery-Ui 框架将突出显示背景色(红色)。

$(function() {

  $('table tr').each(function(i, val) {
    var nprice = $(this).children('.unit-price').find("input[type='text']").val();
    var oprice = $(this).children('.unit-price').find("input[type='hidden']").val();

    console.log("nprice: " + nprice);
    console.log("oprice: " + oprice);
    if (nprice != oprice) {
      console.log(i);
      console.log("nprice: " + nprice + "!=" + "oprice: " + oprice);
      var blink = setInterval(function() {
        $('.cart tr:eq(' + i + ') ').effect('highlight', {
          color: 'red'
        }, 1000);
      }, 1000);
      setTimeout(function() {
        clearInterval(blink);
      }, 10000);
    }
  });

});

.highlight {
  background: red;
  color: green;
  opacity: 0;
}

.unhighlight {
  background: transparent;
  color: black;
  -webkit-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear;
}

.cart th,
.data-table th,
.forum-table th {
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: #ddd;
  background-color: #f6f6f6;
  padding: 10px;
  white-space: nowrap;
  font-weight: normal;
}

.cart td {
  min-width: 50px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent #ddd #ddd;
  background-color: #fff;
  padding: 20px;
  color: #444;
}

.cart a {
  font-weight: normal;
  color: #4ab2f1;
}

.cart a:hover {
  text-decoration: underline;
}

.cart .product {
  min-width: 225px;
  text-align: left;
}

.cart .product a {
  font-weight: bold;
  color: #444;
}

.cart .product a:hover {
  color: #4ab2f1;
  text-decoration: none;
}

.cart .product .edit-item {
  margin: 10px 0 0;
}

.cart .product .edit-item a {
  font-weight: normal;
  color: #4ab2f1;
}

.cart .product .edit-item a:hover {
  text-decoration: underline;
}

.cart .remove-from-cart,
.cart .add-to-cart {
  text-align: center;
}

.cart td.unit-price {
  white-space: nowrap;
}

.cart td.quantity input {
  width: 50px;
  text-align: center;
}

.cart td.subtotal {
  white-space: nowrap;
  color: #444;
}

.cart td.subtotal .discount,
.cart td.subtotal .discount-additional-info {
  font-style: italic;
  color: #4ab2f1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="unit-price">
  <input id="itemprice75" name="itemprice75" type="text" value="75" class="enter-price-input" />
  <input id="itemprevprice75" name="itemprevprice75" type="hidden" value="100" class="unit-prev-price" />
</td>
above with 2 values: 75 and 100
<<<highlight background-color was not working. Help. ``` <table class="cart">
  <thead>
    <tr>
      <th>Id#</th>
      <th>Session Eamil</th>
      <th>Login Url</th>
      <th>Date</th>
      <th>Status</th>
      <th>New Price</th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-center">@counter11</td>
      <td>@item.SessionEmail11</td>
      <td>@item.LoginUrl11</td>
      <td>@item.CreatedAt11</td>
      <td>Failed11</td>
      <td class="unit-price">
        <input id="itemprice75" name="itemprice75" type="text" value="75" class="enter-price-input" />
        <input id="itemprevprice75" name="itemprevprice75" type="hidden" value="75" class="unit-prev-price" />
      </td>

    </tr>
    <tr>
      <td class="text-center">@counter12</td>
      <td>@item.SessionEmail12</td>
      <td>@item.LoginUrl12</td>
      <td>@item.CreatedAt12</td>
      <td>Failed12</td>
      <td class="unit-price">
        <input id="itemprice75" name="itemprice75" type="text" value="75" class="enter-price-input" />
        <input id="itemprevprice75" name="itemprevprice75" type="hidden" value="75" class="unit-prev-price" />
      </td>

    </tr>
    <tr>
      <td class="text-center">@counter12</td>
      <td>@item.SessionEmail12</td>
      <td>@item.LoginUrl12</td>
      <td>@item.CreatedAt12</td>
      <td>Failed12</td>
      <td class="unit-price">
        <input id="itemprice75" name="itemprice75" type="text" value="120" class="enter-price-input" />
        <input id="itemprevprice75" name="itemprevprice75" type="hidden" value="100" class="unit-prev-price" />
      </td>


    </tr>
    <tr>
      <td class="text-center">@counter12</td>
      <td>@item.SessionEmail12</td>
      <td>@item.LoginUrl12</td>
      <td>@item.CreatedAt12</td>
      <td>Failed12</td>
      <td class="unit-price">
        <input id="itemprice75" name="itemprice75" type="text" value="100" class="enter-price-input" />
        <input id="itemprevprice75" name="itemprevprice75" type="hidden" value="100" class="unit-prev-price" />
      </td>

    </tr>
  </tbody>
  </table>

突出显示背景色效果的“效果”功能不起作用。如何修改 JavaScript 代码或 CSS？

Answer 1

尝试使用 callback 调用，如下所示。

let i = 2; //I set i for demo purpose. Your i comes from loop, so no need to declare .
$('.cart tr:eq(' + i + ') ').effect('highlight', {
  color: 'red'
}, 1000, callback);

function callback() {
  setTimeout(function() {
    $('.cart tr:eq(' + i + ') ').removeAttr("style").hide().fadeIn();
  }, 1000);
};

.cart td {
  min-width: 50px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent #ddd #ddd;
  padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<table class="cart">
  <thead>
    <tr>
      <th>Id#</th>
      <th>Session Eamil</th>
      <th>Login Url</th>
      <th>Date</th>
      <th>Status</th>
      <th>New Price</th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-center">@counter11</td>
      <td>@item.SessionEmail11</td>
      <td>@item.LoginUrl11</td>
      <td>@item.CreatedAt11</td>
      <td>Failed11</td>
      <td class="unit-price">
        <input id="itemprice75" name="itemprice75" type="text" value="75" class="enter-price-input" />
        <input id="itemprevprice75" name="itemprevprice75" type="hidden" value="75" class="unit-prev-price" />
      </td>

    </tr>
    <tr>
      <td class="text-center">@counter12</td>
      <td>@item.SessionEmail12</td>
      <td>@item.LoginUrl12</td>
      <td>@item.CreatedAt12</td>
      <td>Failed12</td>
      <td class="unit-price">
        <input id="itemprice75" name="itemprice75" type="text" value="75" class="enter-price-input" />
        <input id="itemprevprice75" name="itemprevprice75" type="hidden" value="75" class="unit-prev-price" />
      </td>

    </tr>
    <tr>
      <td class="text-center">@counter12</td>
      <td>@item.SessionEmail12</td>
      <td>@item.LoginUrl12</td>
      <td>@item.CreatedAt12</td>
      <td>Failed12</td>
      <td class="unit-price">
        <input id="itemprice75" name="itemprice75" type="text" value="120" class="enter-price-input" />
        <input id="itemprevprice75" name="itemprevprice75" type="hidden" value="100" class="unit-prev-price" />
      </td>


    </tr>
    <tr>
      <td class="text-center">@counter12</td>
      <td>@item.SessionEmail12</td>
      <td>@item.LoginUrl12</td>
      <td>@item.CreatedAt12</td>
      <td>Failed12</td>
      <td class="unit-price">
        <input id="itemprice75" name="itemprice75" type="text" value="100" class="enter-price-input" />
        <input id="itemprevprice75" name="itemprevprice75" type="hidden" value="100" class="unit-prev-price" />
      </td>

    </tr>
  </tbody>
</table>