Question

我试图选择包含以下选项的选择框：酒吧，餐厅，酒店。如果用户选择例如，则从包含所有对象的列表中酒吧，餐厅和酒店的对象应隐藏。检查我的jsfiddle：http://jsfiddle.net/s0w98owg/

问题是，当我选择栏时，只有第一个div正在改变

js：

$('#type').change(function(){
if ($(this).val() == "bar") {
    $("#restaurant").hide();
    $("#bar").show();
} 
else if ($(this).val() == "restaurant") {
    $("#bar").hide();
    $("#restaurant").show();
} });

Answer 1

您无法为多个对象提供相同的ID。您可以为多个代码提供相同的ID bar和restaurant。

这样做：

$('#type').change(function(){
    if ($(this).val() == "bar") {
        $(".restaurant").hide();
        $(".bar").show();
    } 
    else if ($(this).val() == "restaurant") {
        $(".bar").hide();
        $(".restaurant").show();
    } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<select id="type" onclick="filterMarkers(this.value);">
    <option value="">Wybierz kategorię</option>
    <option value="restaurant">pierwsza</option>
    <option value="bar">druga</option>
 </select>
<ul id="pasekBoczny">
    <li class="list-sidebar restaurant"><a href="javascript:myclick(0)">Jasło</a></li>
    <li class="list-sidebar restaurant"><a href="javascript:myclick(1)">Jaworzno</a></li>
    <li class="list-sidebar bar"><a href="javascript:myclick(2)">Jędrzejów</a></li>
    <li class="list-sidebar restaurant"><a href="javascript:myclick(3)">Solidarności</a></li>
    <li class="list-sidebar bar"><a href="javascript:myclick(4)">Łódź</a></li></ul>

我已将ID名称更改为类，而在JS中，我已将.更改为#。

您还可以尝试以下优化JS：

$('#type').change(function(){
    var selected = $(this).val();
    $("#pasekBoczny li").hide();
    $("."+selected+"").show();
});

Answer 2

ID在html中是唯一的而不是id为所有li标记使用公共类

html be

public class Test2 {
    public static void main(String[] args) {
        Map<String, Integer> map = new HashMap<String, Integer>();
        map.put("A", 34);
        map.put("B", 25);
        map.put("C", 50);
        map.put("D", 50);

        MyComparator comp = new MyComparator(map);

        Map<String, Integer> newMap = new TreeMap(comp);
        newMap.putAll(map);
        System.out.println(newMap);
    }
}

class MyComparator implements Comparator {
    Map map;

        public MyComparator(Map map) {
        this.map = map;
    }

    @Override
    public int compare(Object o1, Object o2) {
        return (o2.toString()).compareTo(o1.toString());
    }
}

jquery代码很简单

<select id="type" onclick="filterMarkers(this.value);">
    <option value="">Wybierz kategorię</option>
    <option value="restaurant">pierwsza</option>
    <option value="bar">druga</option>
 </select>
<ul id="pasekBoczny">
    <li class="list-sidebar restaurant"><a href="javascript:myclick(0)">Jasło</a></li>
    <li class="list-sidebar restaurant" ><a href="javascript:myclick(1)">Jaworzno</a></li>
    <li class="list-sidebar bar" ><a href="javascript:myclick(2)">Jędrzejów</a></li>
    <li class="list-sidebar restaurant" id="restaurant"><a href="javascript:myclick(3)">Solidarności</a></li>
    <li class="list-sidebar bar" ><a href="javascript:myclick(4)">Łódź</a></li></ul>

Fiddle

Answer 3

Id应该是唯一的使用类而不是id，那么你可以用单行编写代码

<强> HTML

<ul id="pasekBoczny">
    <li class="list-sidebar restaurant"><a href="javascript:myclick(0)">Jasło</a>
    </li>
    <li class="list-sidebar restaurant"><a href="javascript:myclick(1)">Jaworzno</a>
    </li>
    <li class="list-sidebar bar"><a href="javascript:myclick(2)">Jędrzejów</a>
    </li>
    <li class="list-sidebar restaurant"><a href="javascript:myclick(3)">Solidarności</a>
    </li>
    <li class="list-sidebar bar"><a href="javascript:myclick(4)">Łódź</a>
    </li>
</ul>

<强> JS

$('#type').change(function () {
    $(".list-sidebar").not("." + this.value).hide().end().filter("." + this.value).show();
});

<强> DEMO

Answer 4

您正在使用具有一个名称的多个ID！尝试chnage他们属性： fiddle

<select id="type" onclick="filterMarkers(this.value);">
    <option value="">Wybierz kategorię</option>
    <option value="restaurant">pierwsza</option>
    <option value="bar">druga</option>
 </select>
<ul id="pasekBoczny">
    <li class="list-sidebar" data-li-id="restaurant"><a href="javascript:myclick(0)">Jasło</a></li>
    <li class="list-sidebar" data-li-id="restaurant"><a href="javascript:myclick(1)">Jaworzno</a></li>
    <li class="list-sidebar" data-li-id="bar"><a href="javascript:myclick(2)">Jędrzejów</a></li>
    <li class="list-sidebar" data-li-id="restaurant"><a href="javascript:myclick(3)">Solidarności</a></li>
    <li class="list-sidebar" data-li-id="bar"><a href="javascript:myclick(4)">Łódź</a></li>
</ul>

$('#type').change(function(){

    if ($(this).val() == "bar") {
        $("li[data-li-id='restaurant']").hide();
        $("li[data-li-id='bar']").show();
    } 
    else if ($(this).val() == "restaurant") {
        $("li[data-li-id='bar']").hide();
        $("li[data-li-id='restaurant']").show();
    } 
});

Answer 5

最好显示具有不同ID

的不同列表部分

import play.api.Play.current
import play.api.i18n.Messages.Implicits._

<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>"><?php the_author(); ?></a>

Updated Fiddle

Answer 6

我已经添加了一些HTML来确认你的意思

<select name="type" id="type">
    <option value="bar">Bar</option>
    <option value="restaurant">Restaurant</option>
    <option value="hotel">Hotel</option>
</select>
<div id="bar" class="type">Bar</div>
<div id="restaurant" class="type">Restaurant</div>
<div id="hotel" class="type">Hotel</div>

现在是jQuery

$('div.type').hide();
$('#type').change(function()
{
    $('div.type').hide();
    $('#'+$(this).val()).toggle();
});

如果选择了选项，则显示div

6 个答案: