更改搜索值通过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。