ändern Suchwert über Javascript

Question

gestern habe ich ein Thema hier Wordpress - How to change search value using a drop down selector?

und ich figuret es mit Hilfe von Fredrik aber nach einiger Zeit änderte ich meine Idee und ich entfernt wählen, weil es innerhalb Eingang nicht gut war, als ich einige erstellt Links die Schrift ehrfürchtige Symbole weichen jetzt unter Verwendung

Mein abschließendes Suchformular ist

<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> 

und My JS besser aussehende

<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> 

nichts funktionierte :) Es ist eine Schande für mich, aber ich verbrachte Stunden und ich kann es nicht herausgefunden, wie ich

wollen

Wenn ich auf das Foto-Symbol klicken Ich möchte den Wert ändern = „post“ auf value =“ Galerie "Wenn ich auf das Foto-Icon klicke, passiert nichts.

Mein 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; 
} 

EDIt alle 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

Sie haben keine '#searchform #search_type' Element in den HTML-Code Sie zur Verfügung gestellt, so dass nicht funktionieren. Fügen Sie diese ID (Such_Typ) zu Ihrem <input type="hidden" name="post_type" value="post" /> Element hinzu.

und statt es mit .attr Wechsel (‚Wert‘, newValue) Sie nur

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

Als ob die menuSearchClick (e) Funktion ausgeführt verwenden könnten, sollten Sie überprüfen, dass mit einer Warnung () oder console.log ("check"). in dieser Funktion. Wenn diese Protokolle/Warnungen nicht angezeigt werden, können Sie Ihrem Icon div einen onclick = "menuSearchClick()" hinzufügen.