更改搜索值通過javascript

Question

昨天我在這裏創造一個話題Wordpress - How to change search value using a drop down selector?

和我一起弗雷德裏克幫助figuret，但一段時間後，我改變了我的想法，我刪除選擇，因爲它不是裏面輸入好，比我創造了一些使用字體真棒圖標現在至極鏈接正在尋找更好的

我最終的搜索形式是

<div class="searchbox"> 
<form action="<?php echo home_url('/'); ?>" method="get"><button name="search" class="btn"> 
<span></span></button> 
<input type="text" id="s" name="s" value="" /> 

<input type="hidden" name="post_type" value="post" /> 

<div class="select_search"> 

<span class="wrs"> 
<i class="fa fa-video-camera" id="search_type_icon"></i> 
<i class="fa fa-caret-down"></i> 
</span> 

<div class="drop_search"> 
<span data-searchtype="photos"> 
<i class="fa fa-picture-o"></i> 
</span> 
</div> 

</div> 

</form> 
</div> 

和我的JS

<script type="text/javascript"> 
function SearchPostValue(e) { 
e.preventDefault(); 
var t = $(this); 
var searchtype = t.attr('data-searchtype'); 
if (searchtype == 'post') { 
$('#search_type_icon').removeClass('fa fa-picture-o').addClass('fa fa-video-camera'); 
$('[data-searchtype]').attr('data-searchtype', 'gallery').find('i').removeClass('fa fa-video-camera').addClass('fa fa-picture-o'); 
} else { 
$('#search_type_icon').removeClass('fa fa-video-camera').addClass('fa fa-picture-o'); 
$('[data-searchtype]').attr('data-searchtype', 'post').find('i').removeClass('fa fa-picture-o').addClass('fa fa-video-camera'); 
} 
$('.searchbox #search_type').attr('value', searchtype); 
} 
$(document).ready(function(){ 
$('.searchbox .drop_search [data-searchtype]').click(SearchPostValue); 
}); 
</script> 

毫無效果:)它的一個恥辱，我，但我花了幾個小時，當我的圖片圖標，點擊我要改變的值=「郵報」的價值我不出來，因爲我想

=」畫廊「，當我點擊照片圖標沒有任何反應。

我的CSS

.select_search { 
position:absolute; 
right: 40px; 
z-index:10; 
display:inline-block; 
width:58px; 
height:31px; 
cursor:pointer; 
vertical-align:middle; 
} 

.select_search .wrs { 
position:relative; 
z-index:11; 
display:block; 
height:29px; 
text-align:center; 
} 

.select_search:hover .wrs { 
} 


.fa-caret-down { 
position:absolute; 
top:6px; 
right:7px; 
width:7px; 
height:4px; 
-webkit-transition:0 .4s ease-in-out; 
-moz-transition:0 .4s ease-in-out; 
-o-transition:0 .4s ease-in-out; 
transition:transform .4s ease-in-out; 
background-position:-300px 0; 
} 

.drop_search { 
position:absolute; 
z-index:10; 
top:26px; 
left:0; 
display:none; 
width:58px; 
text-align:center; 
} 

.drop_search span { 
display:block; 
padding:0 0 4px; 
} 

.select_search:hover .drop_search { 
display:block; 
} 
.select_search:hover .fa-caret-down { 
-webkit-transform:rotateZ(-180deg); 
-moz-transform:rotateZ(-180deg); 
transform:rotateZ(-180deg); 
position:absolute; 
top:16px; 
right:7px; 
width:7px; 
height:4px; 
} 

.fa-video-camera { 
width:20px; 
height:14px; 
margin:6px 5px 0 0; 
} 

.fa-picture-o { 
width:20px; 
height:14px; 
margin:6px 5px 0 0; 
} 

編輯所有的HTML

<div class="searchbox"> 
<form action="<?php echo home_url('/'); ?>" method="get"><button name="search" type="submit" class="btn"> 
<span></span></button> 
<input type="text" id="s" name="s" value="" /> 

<input type="hidden" id="#search_type" name="post_type" value="post" /> 

<div class="select_search"> 

<span class="wrs"> 
<i class="fa fa-video-camera" id="search_type_icon"></i> 
<i class="fa fa-caret-down"></i> 
</span> 

<div class="drop_search"> 
<span data-searchtype="photos"> 
<i class="fa fa-picture-o"></i> 
</span> 
</div> 

</div> 
</form> 
</div> 
<script type="text/javascript"> 
function SearchPostValue(e) { 
e.preventDefault(); 
var t = $(this); 
var searchtype = t.attr('data-searchtype'); 
if (searchtype == 'post') { 
$('#search_type_icon').removeClass('fa fa-picture-o').addClass('fa fa-video-camera'); 
$('[data-searchtype]').attr('data-searchtype', 'gallery').find('i').removeClass('fa fa-video-camera').addClass('fa fa-picture-o'); 
} else { 
$('#search_type_icon').removeClass('fa fa-video-camera').addClass('fa fa-picture-o'); 
$('[data-searchtype]').attr('data-searchtype', 'post').find('i').removeClass('fa fa-picture-o').addClass('fa fa-video-camera'); 
} 
$('.searchbox #search_type').attr('value', searchtype); 
} 
$(document).ready(function(){ 
$('.searchbox .drop_search [data-searchtype]').click(SearchPostValue); 
}); 
</script> 

Answer 1

你對你所提供的HTML沒有 '#searchform #search_type' 元素，讓不會工作。 將該id（search_type）添加到您的<input type="hidden" name="post_type" value="post" />元素。和

不是與.attr（「值」，NEWVALUE）改變它，你可以只使用

$('#search_type').val(newValue); 

至於是否被執行menuSearchClick（E）功能，你應該檢查與警報（ ）或console.log（「檢查」）。在那個函數裏面。 如果這些日誌/警報不顯示，您可以添加一個onclick =「menuSearchClick（）」到您的圖標div。