javascript - 带有CSS效果的JQuery Ui .effect不起作用
问题描述
此表的行有 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?
解决方案
尝试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>
推荐阅读
- sockets - Arduino软件串行意外输出
- javascript - 我的 Bootstrap 菜单链接正在移动设备上运行
- discord - 如何计算一个命令被使用了多少次 [discord.js]
- r - 在 R 中为多个弹性网使用特定的 alpha 参数
- javascript - 无法将项目插入 mongodb 对象
- next.js - 来自 next/head 的 Head 组件渲染到而不是
- javascript - React 测试库 - 测试方法正在获取正确的参数
- .htaccess - 重写所有没有页面名称的url
- python-3.x - 在 tkinter 上需要有关对象检测程序的帮助
- javascript - 尝试使用量角器过滤 ng-repeat 生成的表