JQuery单击函数随机停止工作
JQuery单击函数随机停止工作
提问于 2015-11-14 21:39:27
当用户单击排序图标时，我将按名称对用户列表进行排序。然而，我已经注意到，有时我点击排序图标，图标被切换，然而，数据没有排序。例如，我点击它10次，可能有3次，当数据没有排序，但图标改变。这里的任何帮助都将不胜感激。
：html代码的一部分.
<div class="divFullWidth hidden-sx col-sm-2 col-md-2 col-lg-2">
<a href="#" data-action="POST"> First Name</a>
<a id="sortName" href="#" data-sort="SORT">
<i id="sortIcon" class="sort fa fa-1x fa-sort-alpha-desc"></i></a></div>处理替换按钮和提交表单的函数.
$('#sortName').on('click', function (e) {
e.preventDefault();
if ($('#sortIcon').hasClass('fa-sort-alpha-desc')) {
$('#searchVal').val('asc');
$('form').submit();
$(this).find('#sortIcon').removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc');
} else {
$('#searchVal').val('desc');
var myVal = $('#searchVal').val();
$('form').submit();
$(this).find('#sortIcon').removeClass('fa-sort-alpha-asc').addClass('fa-sort-alpha-desc');
}
});回答 4
Stack Overflow用户
回答已采纳
发布于 2015-11-14 23:06:42
我更改了代码以查看隐藏字段是否为空。然后，我根据这个决定做出了一个决定。新的JQuery代码如下所示，到目前为止，它运行得很好。
$('#sortName').on('click', function (e) {
e.preventDefault();
var testVal = $('#searchVal').val();
if (testVal === 'desc') {
$('#sortIcon').removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc');
$('#searchVal').val('asc');
} else {
$('#sortIcon').removeClass('fa-sort-alpha-asc').addClass('fa-sort-alpha-desc');
$('#searchVal').val('desc');
}
$('form').submit();
});Stack Overflow用户
发布于 2015-11-14 21:49:18
在if块和else块中，下面的行都应该是相同的吗？
$(this).find('#sortIcon').removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc');Stack Overflow用户
发布于 2015-11-14 23:25:05
像这样试试
$('a#sortName').on('click', function (e) {
e.preventDefault();
// Setting the current clicked icon into a variable.
var findSortIcon = $(this).find('#sortIcon');
if (findSortIcon.hasClass('fa-sort-alpha-desc')) {
$('#searchVal').val('asc');
//$('form').submit(); - We are sending the submit anytime whenever the button is clicked
findSortIcon.removeClass('fa-sort-alpha-desc').addClass('fa-sort-alpha-asc');
} else {
$('#searchVal').val('desc');
//var myVal = $('#searchVal').val(); - no need for this (You dont use it anyway)
// $('form').submit(); - same in here
findSortIcon.removeClass('fa-sort-alpha-asc').addClass('fa-sort-alpha-desc');
}
// Whether its true or false submit it!
$('form').submit();
// Extra stuff to check changing directly
var attr = findSortIcon.attr("class");
$('#show-class').html(attr + " for " + $(this).text())
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divFullWidth hidden-sx col-sm-2 col-md-2 col-lg-2">
<a href="#" data-action="POST"> First Name</a>
<a id="sortName" href="#" data-sort="SORT">
<i id="sortIcon" class="sort fa fa-1x fa-sort-alpha-desc">
ICON
</i>
</a>
</div>
<div class="divFullWidth hidden-sx col-sm-2 col-md-2 col-lg-2">
<a href="#" data-action="POST"> First Name2</a>
<a id="sortName" href="#" data-sort="SORT">
<i id="sortIcon" class="sort fa fa-1x fa-sort-alpha-desc">
ICON2
</i>
</a>
</div>
<div id="show-class"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33713691
复制相关文章
相似问题
腾讯云开发者
