select 上的多个单选按钮附加 div 并使用向下箭头作为背景图片

Question

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

这是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 class 和向下箭头 CSS 中显示 none class 并删除 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 link，您可以尝试使用 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);
    });
};

select 上的多个单选按钮附加 div 并使用向下箭头作为背景图片

Multiple Radio Buttons on select attach div with down arrow as background image

html

javascript

css

jquery-ui

angularjs