javascript - 通过 javascript 更改搜索值

Question

昨天我在这里创建了一个话题Wordpress - How to change search value using a drop down selector?

我在 Fredrik 的帮助下弄明白了，但过了一段时间我改变了我的想法，我删除了 select，因为它的内部输入并不好，而不是我使用字体很棒的图标创建了一些链接，现在看起来更好

我的最终搜索表单是

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

什么都没用 :) 这对我来说是一种耻辱，但我花了几个小时，但我无法按照自己的意愿弄清楚

当我点击图片图标时，我想将 value="post"更改为 value="gallery"当我点击照片图标时，没有任何反应。

我的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('value', newValue) 改变它，你可以使用

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

至于menuSearchClick(e)函数是否被执行，你应该通过alert()或console.log("check")来检查。在那个函数里面。如果这些日志/警报没有显示，您可以将 onclick="menuSearchClick()"添加到您的图标 div。