Question

我为电话间隙项目写了一个自定义下拉列表。它有3个条目：Enterprices Routing & Switches，Junos Security和Service Provider Routing and Switching。每当我选择3个条目中的任何一个时，它都会被成功选中，但它会显示所选的条目两次。我希望选择的条目只显示一次。我的JavaScript代码是：

$(".current_track").click(function() {
  if ($('.track').is(':visible')) {
    $(".track").hide();
    $(".trackIcon").removeClass("trackOpenIcon").addClass("trackCloseIcon");
    if ($('.trackName').text() != "Select Track") {
      $(".category").show();
      $('.lock_hide').show();
      $('#TrackBuy').show();
    }
  } else {
    $(".category").hide();
    $('.lock_hide').show();
    $('#TrackBuy').hide();
    $(".track").show();
    $('.lock_hide').show();
    $(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon");
  }
});
$('.trackDiv').on("click", ".track", function() {
  $('.trackName').text($(this).text());
  $('.trackName').attr("id", $(this).attr("id"));
  $(".track").hide();
  $(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon");
  $('.lock_hide').show();
  // saving user selected/clicked trackid and track name to local stroage
  localStorage.setItem("mainTrackid", $(this).attr("id"));
  localStorage.setItem("mainTrackname", $(this).text());
  localStorage.setItem("selectedTrackPayStatus", $(this).attr("payStatus"));
  localStorage.removeItem("selectedTrackPrice");
  // check first paper exist or not if exist means load exams list

  checkTrackpapersExist();

});

Entire code example

Answer 1

<强> Updated fiddle

您可以使用额外的课程selected来完成这项工作。

从所有selected中删除track课程，并将其添加到点击的课程中：

$('.trackDiv').on("click", ".track", function() {
  $('.track').removeClass('selected');
  $(this).addClass('selected');

  $('.trackName').html($(this).html()); //Use '.html()' to show the icon
  ....
});

从下拉列表中隐藏选定的track：

$(".current_track").click(function() {
  .....

  $('.track.selected').hide();
});

希望这有帮助。

＆＃13;

$(".current_track").click(function() {

  if ($('.track').is(':visible')) {
    $(".track").hide();
    $(".trackIcon").removeClass("trackOpenIcon").addClass("trackCloseIcon");
    if ($('.trackName').text() != "Select Track") {
      $(".category").show();
      $('.lock_hide').show();
      $('#TrackBuy').show();
    }
  } else {
    $(".category").hide();
    $('.lock_hide').show();
    $('#TrackBuy').hide();
    $(".track").show();
    $('.lock_hide').show();
    $(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon");
  }

  $('.track.selected').hide();
});
$('.trackDiv').on("click", ".track", function() {
  $('.track').removeClass('selected');
  $(this).addClass('selected');

  $('.trackName').html($(this).html());
  $('.trackName').attr("id", $(this).attr("id"));
  $(".track").hide();
  $(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon");
  $('.lock_hide').show();
});

＆＃13;

.trackDiv > .track > .fa-lock {
  margin-top: 3px;
}

.fa-lock {
  color: #fff;
  font-size: 23px;
}

.lock_category {
  padding-right: 0px;
  padding-top: 3px;
}

.lock_hide {
  display: none;
}

.fa-unlock {
  color: #fff;
  font-size: 17px;
}

.trackDiv {
  background-color: #374550;
  border-radius: 4px;
  height: 40%;
  margin: 2% 0 0;
  padding: 3% 2.7% 2.9%;
  width: 100%;
}

.trackName {
  color: #fff;
  font-family: "robotRegular";
  font-size: 16px;
  font-weight: 500;
}

.trackOpenIcon {
  background-image: url("../JunosImages/mob/down-arrow_normal1.png");
  background-image: url("../JunosImages/mob/front-arrow_normal_tab.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: block;
  height: 11px;
  margin-top: 1.5%;
  width: 19px;
}

.trackCloseIcon {
  background-image: url("../JunosImages/mob/front-arrow_normal_tab.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: block;
  height: 18px;
  margin-top: 0.7%;
  width: 12px;
}

.track {
  color: #fff;
  display: block;
  font-family: "robotRegular";
  font-size: 16px;
  font-weight: 500;
  padding: 5% 0 0;
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div id="categorylist">
  <div class="trackDiv">
    <div class="current_track">
      <span class="trackName">Select Track</span>
      <span class="trackIcon trackOpenIcon pull-right"></span>
      <div><span class="label label-primary Buy" id="TrackBuy" style="display:none">Buy $24</span></div>
    </div>
    <span id="t1" class="track">Enterprices Routing & Switches <span class="fa fa-lock pull-left"></span></span>
    <span id="t2" class="track">Junos Security</span>
    <!-- <span id="t3" class="track">Data Center Design</span> -->
    <span id="t4" class="track">  Service Provider Routing and Switching</span>
  </div>
  <div class="category">
    <span class="ctgryName">JNCIs - SEC</span>
    <span class="ctgryIcon pull-right"></span>
  </div>
  <div class="category">
    <span class="ctgryName">JNCIS - ENT</span>
    <span class="ctgryIcon pull-right"></span>
  </div>
  <div class="category">
    <span class="ctgryName">JNCIS - ENT</span>
    <span class="ctgryIcon pull-right"></span>
  </div>
  <div class="category">
    <span class="ctgryName" id="ctgryName">JNCIA - Junos</span>
    <span class="ctgryIcon pull-right"></span>
  </div>
</div>

＆＃13;

自定义下拉列表未按预期工作

1 个答案: