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

我有收音机类型的输入列表，这些下拉列表提供基于选择的数据集排序功能。最初，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类中设置property 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>

---

但是，在我看来，这并不是一种有效的方式。有人能推荐其他方法吗？

您的标记显示您正在使用jQuery。您可以简单地使用jQuery元素的.hide和.show方法。比如：

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

您可以从display:none样式开始，并使用以下命令进行切换：

编辑： 在链接中，您可以尝试一个变量，如单击时切换的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>

只要从一种状态切换到另一种状态，这两个触发器的作用相同。

找到了一个解决方案

<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>

---

我认为这是一个很好的方法。最好使用span内联。向我们展示您的尝试？谢谢您的建议。实际上，我正在使用AngularJs。这是否意味着您没有使用jQuery？因为，如果是这样，你应该从你的问题中去掉标签。

<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>

$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);
    });
};