我有无线电类型的输入列表，这些下拉列表提供基于选择的数据集排序功能。最初，select提供按升序排序。为了提供两种排序（升序和降序），在选择收音机时，首先要显示向下箭头图像，然后按升序对数据进行排序，然后当用户单击箭头时，它将变成向上箭头图像，并按降序对数据进行排序命令。当用户单击另一个收音机时，箭头将从先前选择的收音机中删除，并添加到当前选择的收音机中。
这是HTML
<ul>
<li> <input type="radio" id="btn_Value" name="btn_Sort" value="Value" ng-model="sortType" ng-click="sortChartData('Value')" />			Value</li>
<li> <input type="radio" id="btn_ScoreSort" name="btn_Sort" value="Score" ng-Model="sortType" ng-click="sortChartData('Score')" />			Score</li>
<li> <input type="radio" id="btn_Quartile" name="btn_Sort" ng-Model="sortType" ng-click="sortChartData('Quartile')" value="Quartile" />			Quartile</li>
</ul>
我可以在每个li旁边附加一个div，并在CSS类和向下箭头CSS类中设置不显示属性，并删除display：none属性，并在单击时添加jquery事件处理程序。这是新的HTML。
<ul>
<li> <input type="radio" id="btn_Value" name="btn_Sort" value="Value" ng-model="sortType" ng-click="sortChartData('Value')" />			Value<div class="hide ascSort"></div></li>
<li> <input type="radio" id="btn_ScoreSort" name="btn_Sort" value="Score" ng-Model="sortType" ng-click="sortChartData('Score')" />			Score</li>
<li> <input type="radio" id="btn_Quartile" name="btn_Sort" ng-Model="sortType" ng-click="sortChartData('Quartile')" value="Quartile" />			Quartile</li>
</ul>
但是，在我看来，这并不是一种有效的方法。有人可以建议其他方法吗？
您的标签显示您正在使用jQuery。您可以简单地使用jQuery元素的.hide()和.show()方法。就像是：
$("#sortArrowAsc").show();
$("#sortArrowDesc").hide();
您可以从display: none样式开始，并使用以下命令.toggle()：
$("#sortArrowAsc").toggle();
$("#sortArrowDesc").toggle();
编辑：从这个链接，你可以尝试一个变量一样show，你切换上点击：
<div class="yourRadioContainer">
<span class="someUp" ng-show="show"><img src='uparrow.png' /></span>
<span class="someDown" ng-hide="!show"><img src='downarrow.png' /></span>
<span class="trigger" ng-click="show=!show">Radio Asc</span>
<span class="trigger" ng-click="show=!show">Radio Desc</span>
</div>
这两个触发器的作用与您从一种状态切换到另一种状态的方式相同。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句