を変更する検索値は、JavaScriptで

Question

昨日私はここで話題Wordpress - How to change search value using a drop down selector?

を作成し、私はフレドリックの助けを借りてそれをfiguretが、時間が経過した後、私は私の考えを変え、それが入力内部良くなかったので、私はいくつかを作成したよりも、私が選択し削除しました素晴らしいアイコンは今WICHフォントを使用してリンクが良く見ている

私の最終的な検索フォームがある

<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

「=

は何も私のため:)その恥を働いていないが、私は時間を過ごし、私は

をしたいと私は値の値に=「ポスト」を変更したい画像のアイコンをクリックすると、私はそれを把握することはできませんギャラリー "をクリックすると何も起こりません。

マイ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に）とそれを変えるあなただけmenuSearchClick（E）関数が実行されているかどうかについては

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

を使用することができ、あなたは、（アラートにそれをチェックする必要があります）またはconsole.log（ "check"）。その機能の中に これらのログ/アラートが表示されない場合は、アイコンdivにonclick = "menuSearchClick（）"を追加できます。