当我调整其他代码片段时，Javascript停止工作

Question

我有一个jquery片段工作，但是当我在现有脚本中添加另一个javascript代码时JS停止工作。 我添加的代码是下面的代码，它适用于this snippet：

$("ul").on("click", ".init", function() {
  $(this).closest("ul").children('li:not(.init)').toggle();
});

var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
  allOptions.removeClass('selected');
  $(this).addClass('selected');
  $("ul").children('.init').html($(this).html());
  allOptions.toggle();
  console.log($('.selected .value').text());
});

我正在处理的代码段是this

这是我的HTML：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
        type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css"
      rel="Stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<ul class="list-unstyled" style="list-style: none;">
    <li class="init">--SELECT--</li>
    <li data-value="value 2"><span class="value">Durban</span><span class="numbers">1700</span></li>
    <li data-value="value 3"><span class="value">Durban</span><span class="numbers">1400</span></li>
    <li data-value="value 4"><span class="value">Durban</span><span class="numbers">1200</span></li>
</ul>

<div class="date-example-container">            
            <div class="selection">
                <div class="label">
                    <label>Waarheen gaan jy?</label>    
                    <select id="selection">                                 
                        <option value="">Naam van Blyplek</option>                  
                        <option value="karoo">Karoo</option>                    
                        <option value="knysna">Knysna</option>                  
                        <option value="durban">Durban</option>                  
                        <option value="pretoria">Pretoria</option>                  
                        <option value="kaapstad">Kaapstad</option>                  
                        <option value="tuinroete">Tuinroete</option>                
                    </select>
                </div>              

                <div class="icon" tabindex="0">                 
                    <div>                       
                        <i class="fa fa-search" aria-hidden="true"></i>                 
                    </div>              
                </div>          
            </div>                  
            <div class="from-to">           
                <div class="from">
                    <div class="label">
                        <label>Vanaf</label>
                        <input placeholder="Inklok" type="text" id="txtFrom" /> 
                    </div>                                    
                    <i class="fa fa-calendar-o" aria-hidden="true"></i>         
                </div>          
                <div class="to">
                    <div class="label">
                        <label>Tot</label>    
                        <input placeholder="Uitklok" type="text" id="txtTo" />
                    </div>                
                    <i class="fa fa-calendar-o" aria-hidden="true"></i>         
                </div>      
            </div>          
            <div class="field right">

                <div class="label">
                    <label>Aantal gaste</label>             
                    <select id="search-pax" name="pax" class="ls-select ">
                        <option value="1">1 gas</option>
                        <p>Vim aqui pra vadiar</p>
                        <option value="2">2 gaste</option>                  
                        <option value="3">3 gaste</option>                  
                        <option value="4">4 gaste</option>                  
                        <option value="5">5 gaste</option>                  
                        <option value="6">6 gaste</option>                  
                        <option value="7">7 gaste</option>                  
                        <option value="8">8 gaste</option>                  
                        <option value="9">9 gaste</option>                  
                        <option value="10">10 gaste</option>                
                        <option value="11">11 gaste</option>                
                        <option value="12">12 gaste</option>                
                        <option value="13">13 gaste</option>                
                        <option value="14">14 gaste</option>                
                        <option value="15">15 gaste</option>                
                        <option value="16">16 gaste</option>                
                        <option value="17">17 gaste</option>                
                        <option value="18">18 gaste</option>                
                        <option value="19">19 gaste</option>                
                        <option value="20">20 gaste</option>                
                    </select>   
                </div>          
                <div class="icon" tabindex="0">
                    <div>
                        <i class="fa fa-user" aria-hidden="true"></i>
                    </div>
                </div>          
            </div>          
            <a id="atributo"href="#" target="_blank">SOEK AKKOMMODASIE</a>      
        </div>

CSS：

body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

li{
  display: flex;
  justify-content: space-between;

}
li, ul{
  padding: 0;
  margin: 0;
}


body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

li{
  display: flex;
  justify-content: space-between;

}
li, ul{
  padding: 0;
  margin: 0;
}

#column{
  position: relative;
}
li{
  list-style: none;
  justify-content: space-between;
  display: flex;
}
li:hover{
  background: black;
  color: white;

}
.date-example-container i.fa {
    color: #555;
}

.date-example-container {
    width: 100%;
    max-width: 350px;
    margin: 20px 0;
    color: #9999a2;
    clear: both;
}

.date-example-container label{color: #555555;}


input#txtTo,
input#txtFrom{
  position: relative;
  padding: 10px;
}

input#txtFrom:after{
  font-family: fontawesome;
  content: '\f073';
  psotion: absolute;
}

.fa-calendar-o{
  position: absolute;
  right: 0;
  top: 26px;
  padding: 10px;
}
.submit-here{
  display: inline-block;
  background: #ee782e;
  border: 0;
  color: white;
  padding:10px;
  margin-top: 10px;
}

select{
  width: 100%;
  padding: 10px;
  -webkit-appearance: none;
}

.date-example-container .field.right {
    position: relative;
    float: none;
}

.icon {
    width: 33px;
    height: 40px;
    position: absolute;
    right: 0;
    color: #000;
    font-size: 18pt;
}

.from-to i {
    font-size: 18pt;
}

.selection{
  position: relative;
}

.date-example-container .field.right .icon {
    top: 36px;
}

.selection .icon {
    top: 34px;
}

.from-to .icon{
    right: 3px;
    top: 26px;
}

input#txtTo, input#txtFrom {
    position: relative;
    padding: 10px;
    width: 100%;
    max-width: 130px;
}

.date-example-container input{
    width: 100%;
    /*display: block;
*/}

.date-example-container label {
    display: block;
}

.from-to {
    display: flex;
    padding: 10px 0;
    justify-content: space-between;
}

.from, .to {
    position: relative;
}

a#atributo {
    display: block;
    background: #ee782e;
    border: 0;
    color: white;
    padding: 10px;
    margin-top: 10px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;

}

td.ui-datepicker-unselectable.ui-state-disabled {
    background: white;
    color: #ebebeb;
}

table.ui-datepicker-calendar td {
    border: 0;
    background: #DADADA;
    color: black;
}

a.ui-state-default {
    color: #555;
}

.ui-datepicker-title > span {
    border-bottom: 1px solid;
}

.ui-datepicker-calendar th {
    background: transparent !important;
    border: 0 !important;
    color: #999 !important;
    font-weight: bold !important;
}

input#txtTo:active, 
input#txtFrom:active,
select#search-pax:active,
input#txtTo:hover, 
input#txtFrom:hover,
select#search-pax:hover,
select#selection:hover,
select#selection:active {
    border-color: #EE782E;
    font-style: normal;
    outline: 0 !important;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next,
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev{
    background: none;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-next:after,
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before{
    font-family: fontawesome;
    color: #999;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before {
    content: '\f0d9 ';   
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-next:after{ 
    content: '\f0da';
}

body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

li{
  display: flex;
  justify-content: space-between;

}
li, ul{
  padding: 0;
  margin: 0;
}

body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    /*border: 1px #000 solid;*/
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

li{
  display: flex;
  justify-content: space-between;

}
li, ul{
  padding: 0;
  margin: 0;
}

JS：

jQuery(document).ready( function($){

  $("ul").on("click", ".init", function() {
      $(this).closest("ul").children('li:not(.init)').toggle();
  });

  var allOptions = $("ul").children('li:not(.init)');
  $("ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $("ul").children('.init').html($(this).html());
    allOptions.toggle();
    console.log($('.selected .value').text());
  });


    var txtFromDate, txtToDate;
  $("#txtFrom").datepicker({
    dateFormat: "d/M/yy",
    numberOfMonths: 1,
    onSelect: function(selected) {
      txtFromDate = selected;
      var dt = new Date(selected);
      dt.setDate(dt.getDate() + 1);
      $("#txtTo").datepicker("option", "minDate", dt);
    }
  });
  $("#txtTo").datepicker({
    numberOfMonths: 1,
    onSelect: function(selected) {
      txtToDate = selected;
      var dt = new Date(selected);
      dt.setDate(dt.getDate() - 1);
      $("#txtFrom").datepicker("option", "maxDate", dt);
    }
  });

  $('a#atributo').click(function() {
    // var link = day_1+month_1+year;
     var monthNames = [
        "Jan", "Feb", "Mar",
        "Apr", "May", "Jun", "Jul",
        "Aug", "Sep", "Oct",
        "Nov", "Dec"
      ];

    var date1 = $("#txtFrom").datepicker('getDate'),
        day_1  = date1.getDate(),  
        month_1 = date1.getMonth() + 1,              
        year_1 =  date1.getFullYear();

    var date2 = $("#txtTo").datepicker('getDate'),
        day_2  = date2.getDate(),  
        month_2 = date2.getMonth() + 1,              
        year_2 =  date2.getFullYear(); 


    var people = $('#search-pax :selected').val();

    $(this).attr("href", "http://www.lekkeslaap.co.za/akkommodasie-in/"+where+"?q="+where+"&start="+day_1+"+"+monthNames[month_1]+"+"+year_1+'&end='+day_2+'+'+monthNames[month_2]+'+'+year_2+'&pax='+people);
  });
});

如何制作下拉菜单和日历？

Answer 1

版本1.7中添加了

jQuery.on方法，你有1.6（你可以用bind替换它，或者你可以升级jQuery库的版本）

查看下面的代码段

jQuery(document).ready( function(){

    $("ul").on("click", ".init", function() {
      $(this).closest("ul").children('li:not(.init)').toggle();
  });

  var allOptions = $("ul").children('li:not(.init)');
  $("ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $("ul").children('.init').html($(this).html());
    allOptions.toggle();
    console.log($('.selected .value').text());
  });

     
	var txtFromDate, txtToDate;
  $("#txtFrom").datepicker({
    dateFormat: "d/M/yy",
    numberOfMonths: 1,
    onSelect: function(selected) {
      txtFromDate = selected;
      var dt = new Date(selected);
      dt.setDate(dt.getDate() + 1);
      $("#txtTo").datepicker("option", "minDate", dt);
    }
  });
  $("#txtTo").datepicker({
    numberOfMonths: 1,
    onSelect: function(selected) {
      txtToDate = selected;
      var dt = new Date(selected);
      dt.setDate(dt.getDate() - 1);
      $("#txtFrom").datepicker("option", "maxDate", dt);
    }
  });

  $('a#atributo').click(function() {
    // var link = day_1+month_1+year;
	 var monthNames = [
		"Jan", "Feb", "Mar",
		"Apr", "May", "Jun", "Jul",
		"Aug", "Sep", "Oct",
		"Nov", "Dec"
	  ];

    var date1 = $("#txtFrom").datepicker('getDate'),
        day_1  = date1.getDate(),  
        month_1 = date1.getMonth() + 1,              
        year_1 =  date1.getFullYear();
            
    var date2 = $("#txtTo").datepicker('getDate'),
        day_2  = date2.getDate(),  
        month_2 = date2.getMonth() + 1,              
        year_2 =  date2.getFullYear(); 
    
    
    var people = $('#search-pax :selected').val();
    
    $(this).attr("href", "http://www.lekkeslaap.co.za/akkommodasie-in/"+where+"?q="+where+"&start="+day_1+"+"+monthNames[month_1]+"+"+year_1+'&end='+day_2+'+'+monthNames[month_2]+'+'+year_2+'&pax='+people);
  });
});

body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

li{
  display: flex;
  justify-content: space-between;

}
li, ul{
  padding: 0;
  margin: 0;
}


body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

li{
  display: flex;
  justify-content: space-between;
  
}
li, ul{
  padding: 0;
  margin: 0;
}

#column{
  position: relative;
}
li{
  list-style: none;
  justify-content: space-between;
  display: flex;
}
li:hover{
  background: black;
  color: white;

}
.date-example-container i.fa {
    color: #555;
}

.date-example-container {
    width: 100%;
    max-width: 350px;
    margin: 20px 0;
	color: #9999a2;
	clear: both;
}

.date-example-container label{color: #555555;}


input#txtTo,
input#txtFrom{
  position: relative;
  padding: 10px;
}

input#txtFrom:after{
  font-family: fontawesome;
  content: '\f073';
  psotion: absolute;
}

.fa-calendar-o{
  position: absolute;
  right: 0;
  top: 26px;
  padding: 10px;
}
.submit-here{
  display: inline-block;
  background: #ee782e;
  border: 0;
  color: white;
  padding:10px;
  margin-top: 10px;
}

select{
  width: 100%;
  padding: 10px;
  -webkit-appearance: none;
}

.date-example-container .field.right {
    position: relative;
	float: none;
}

.icon {
    width: 33px;
    height: 40px;
    position: absolute;
    right: 0;
    color: #000;
	font-size: 18pt;
}

.from-to i {
    font-size: 18pt;
}

.selection{
  position: relative;
}

.date-example-container .field.right .icon {
	top: 36px;
}

.selection .icon {
    top: 34px;
}

.from-to .icon{
	right: 3px;
	top: 26px;
}

input#txtTo, input#txtFrom {
    position: relative;
    padding: 10px;
    width: 100%;
    max-width: 130px;
}

.date-example-container input{
	width: 100%;
	/*display: block;
*/}

.date-example-container label {
    display: block;
}

.from-to {
    display: flex;
    padding: 10px 0;
    justify-content: space-between;
}

.from, .to {
    position: relative;
}

a#atributo {
    display: block;
    background: #ee782e;
    border: 0;
    color: white;
    padding: 10px;
    margin-top: 10px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
  
}

td.ui-datepicker-unselectable.ui-state-disabled {
    background: white;
    color: #ebebeb;
}

table.ui-datepicker-calendar td {
    border: 0;
    background: #DADADA;
    color: black;
}

a.ui-state-default {
    color: #555;
}

.ui-datepicker-title > span {
    border-bottom: 1px solid;
}

.ui-datepicker-calendar th {
    background: transparent !important;
    border: 0 !important;
    color: #999 !important;
    font-weight: bold !important;
}

input#txtTo:active, 
input#txtFrom:active,
select#search-pax:active,
input#txtTo:hover, 
input#txtFrom:hover,
select#search-pax:hover,
select#selection:hover,
select#selection:active {
    border-color: #EE782E;
    font-style: normal;
    outline: 0 !important;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next,
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev{
	background: none;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-next:after,
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before{
	font-family: fontawesome;
	color: #999;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before {
	content: '\f0d9 ';   
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-next:after{	
	content: '\f0da';
}

body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

li{
  display: flex;
  justify-content: space-between;

}
li, ul{
  padding: 0;
  margin: 0;
}

body{
  padding:30px;
}
ul { 
    height: 30px;
    width: 150px;
    /*border: 1px #000 solid;*/
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

li{
  display: flex;
  justify-content: space-between;

}
li, ul{
  padding: 0;
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
        type="text/javascript"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/start/jquery-ui.css"
      rel="Stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<ul class="list-unstyled" style="list-style: none;">
    <li class="init">--SELECT--</li>
    <li data-value="value 2"><span class="value">Durban</span><span class="numbers">1700</span></li>
    <li data-value="value 3"><span class="value">Durban</span><span class="numbers">1400</span></li>
    <li data-value="value 4"><span class="value">Durban</span><span class="numbers">1200</span></li>
</ul>

<div class="date-example-container">			
			<div class="selection">
				<div class="label">
					<label>Waarheen gaan jy?</label>	
					<select id="selection">									
						<option value="">Naam van Blyplek</option>					
						<option value="karoo">Karoo</option>					
						<option value="knysna">Knysna</option>					
						<option value="durban">Durban</option>					
						<option value="pretoria">Pretoria</option>					
						<option value="kaapstad">Kaapstad</option>					
						<option value="tuinroete">Tuinroete</option>				
					</select>
				</div>				
								
				<div class="icon" tabindex="0">					
					<div>						
						<i class="fa fa-search" aria-hidden="true"></i>					
					</div>				
				</div>			
			</div>					
			<div class="from-to">			
				<div class="from">
					<div class="label">
						<label>Vanaf</label>
						<input placeholder="Inklok" type="text" id="txtFrom" />	
					</div>		  							  
					<i class="fa fa-calendar-o" aria-hidden="true"></i>			
				</div>			
				<div class="to">
					<div class="label">
						<label>Tot</label>	  
						<input placeholder="Uitklok" type="text" id="txtTo" />
					</div>				  
					<i class="fa fa-calendar-o" aria-hidden="true"></i>			
				</div>		
			</div>			
			<div class="field right">

				<div class="label">
					<label>Aantal gaste</label>				
					<select id="search-pax" name="pax" class="ls-select ">
						<option value="1">1 gas</option>
						<p>Vim aqui pra vadiar</p>
						<option value="2">2 gaste</option>					
						<option value="3">3 gaste</option>					
						<option value="4">4 gaste</option>					
						<option value="5">5 gaste</option>					
						<option value="6">6 gaste</option>					
						<option value="7">7 gaste</option>					
						<option value="8">8 gaste</option>					
						<option value="9">9 gaste</option>					
						<option value="10">10 gaste</option>				
						<option value="11">11 gaste</option>				
						<option value="12">12 gaste</option>				
						<option value="13">13 gaste</option>				
						<option value="14">14 gaste</option>				
						<option value="15">15 gaste</option>				
						<option value="16">16 gaste</option>				
						<option value="17">17 gaste</option>				
						<option value="18">18 gaste</option>				
						<option value="19">19 gaste</option>				
						<option value="20">20 gaste</option>				
					</select>	
				</div>			
				<div class="icon" tabindex="0">
					<div>
						<i class="fa fa-user" aria-hidden="true"></i>
					</div>
				</div>			
			</div>			
			<a id="atributo"href="#" target="_blank">SOEK AKKOMMODASIE</a>		
		</div>