[英]Custom dropdown isn't working as expected
我为一个电话间隙项目写了一个自定义下拉列表。 它有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();
});
整个代码示例 。
更新了小提琴 。
你可以使用一个额外的类selected
这样的伎俩。
从所有track
删除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();
});
希望这可以帮助。
$(".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(); });
.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%; }
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.