Question

我有无线电类型的输入列表，这些下拉提供基于选择的数据集的排序功能。最初，select按升序排序。为了提供两种排序（升序和降序），在选择无线电时最初要显示向下箭头图像。以升序排序数据，然后当用户单击箭头时，它将变为向上箭头图像并按降序对数据进行排序。当用户点击另一个无线电时，箭头将从之前选择的无线电中删除，并添加到当前选定的无线电中。

这是HTML

<ul>
<li> <input type="radio" id="btn_Value" name="btn_Sort" value="Value" ng-model="sortType" ng-click="sortChartData('Value')"  />&#09;&#09;&#09;Value</li>
<li>  <input type="radio" id="btn_ScoreSort" name="btn_Sort"  value="Score"  ng-Model="sortType" ng-click="sortChartData('Score')"  />&#09;&#09;&#09;Score</li>
<li>  <input type="radio" id="btn_Quartile" name="btn_Sort" ng-Model="sortType" ng-click="sortChartData('Quartile')" value="Quartile" />&#09;&#09;&#09;Quartile</li>
</ul>

我可以在每个li旁边附加一个div，并在CSS类和向下箭头CSS类中设置属性display none，并删除display：none属性并在点击时添加jquery事件处理程序。这是新的HTML。

  <ul>
  <li> <input type="radio" id="btn_Value" name="btn_Sort" value="Value" ng-model="sortType" ng-click="sortChartData('Value')"  />&#09;&#09;&#09;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')"  />&#09;&#09;&#09;Score</li>
<li>  <input type="radio" id="btn_Quartile" name="btn_Sort" ng-Model="sortType" ng-click="sortChartData('Quartile')" value="Quartile" />&#09;&#09;&#09;Quartile</li>
</ul>

但是，在我看来，这并不是那种有效的方法。任何人都可以建议任何其他方法吗？

Answer 1

您的代码显示您正在使用jQuery。您可以简单地使用jQuery元素的.hide()和.show()方法。类似的东西：

$("#sortArrowAsc").show();
$("#sortArrowDesc").hide();

您可以从display: none样式开始，并将这些命令用于.toggle()：

$("#sortArrowAsc").toggle();
$("#sortArrowDesc").toggle();

编辑：在this链接中，您可以尝试使用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>

两个触发器的行为方式相同，只需从一个状态切换到另一个状态。

Answer 2

想出一个解决方案。

<ul id="sort">
<li> <input type="radio" id="btn_Value" name="btn_Sort" value="Value" ng-model="sortType" ng-click="sortChartData('Value')"  />&#09;&#09;&#09;Value<span id="sortValue" class="descSort" ng-if="valueSortType" ng-click="changeSortType($event)"></span></li>
<li>  <input type="radio" id="btn_ScoreSort" name="btn_Sort"  value="Score"  ng-Model="sortType" ng-click="sortChartData('Score')"  />&#09;&#09;&#09;Score<span id="sortScore" class="descSort" ng-if="scoreSortType" ng-click="changeSortType($event)"></span></li>
<li>  <input type="radio" id="btn_Quartile" name="btn_Sort" ng-Model="sortType" ng-click="sortChartData('Quartile')" value="Quartile" />&#09;&#09;&#09;Quartile<span id="sortQt" class="descSort" ng-if="qtSortType" ng-click="changeSortType($event)"></span></li>
</ul>

在HTML中 ng-if =“valueSortType”会在用户选择收音机为真时更新。

事件处理程序：

$scope.changeSortType = function (event) {
    var elem = event.target;
    var cssClass = elem.getAttribute('class');
    if (cssClass.indexOf("ascSort") > -1) {
        $(elem).removeClass('ascSort');
        $(elem).addClass('descSort');
        $scope.sortOrder = "desc";
    }
    if (cssClass.indexOf("descSort") > -1) {
        $(elem).removeClass('descSort');
        $(elem).addClass('ascSort');
        $scope.sortOrder = "asc";
    }
    $scope.$watch("sortOder", function () {
        $scope.sortChartData($scope.sortType);
    });
};

选择附加div上的多个单选按钮，向下箭头作为背景图像

2 个答案: