javascript - 试图在 jquery 中将此菜单与此数据连接

Question

<a class = "dot" situation = "LA">managua</a><br />
<a class = "dot" situation = "AA" >japon</a><br />
<a class = "dot" situation = "GO" >goa</a><br />
<a class = "dot" situation = "MA" >madrid</a><br />
<br />
<form id="mapForm" name="mapForm" method="post" action="" class="formCities">
   <select name="cities" id="cities">
          <option value="AA">japon</option>
          <option value="MA">madrid</option>
          <option value="LA">managua</option>
          <option value="GO">goa</option>
          <option value="cities" selected = "selected">cities</option>
    </select>
</form> <br />


<h2 id = "otherMenu" class = "menu_class" >My menu </h2>
<ul class="the_menu">
<li><a href="#" value="AA">japon</a></li>
<li><a href="#" value="MA">madrid</a></li>
<li><a href="#" value="LA">managua</a></li>
<li><a href="#" value="GO">goa</a></li>
</ul>


%%%%%%%%%%%%%%

$(document).ready(function(){

$('h2.menu_class').click(function () {
    $('ul.the_menu').slideToggle('medium');

});
    //This works
    /*

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

        var selectedCity = $('#mapForm option:selected').val();
        alert(selectedCity);
        if (selectedCity == 'cities'){
            $('a.dot').show(1000);
    }else{

        $('a.dot[situation *= "'+selectedCity+'"]').show(1000);
        $('a.dot[situation != "'+selectedCity+'"]').hide(1000);

        }
      */
        // but not this way? why???

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

        var selectedCity = $('#otherMenu a:onclick').val(); // I guess here it's the problem
              alert(selectedCity );
        if (selectedCity == 'cities'){
            $('a.dot').show(1000);
    }else{

        $('a.dot[situation *= "'+selectedCity+'"]').show(1000);
        $('a.dot[situation != "'+selectedCity+'"]').hide(1000);

        }


 });

大家好，我正在学习 jquery。我正在尝试呈现与不同菜单交互的数据(国家列表)。 :( 选择表运行良好，但“菜单列表”无法正常工作 :(

感谢您的帮助:(

看看我的作品:http://jsfiddle.net/yoniGeek/JNfm4/1/

Answer 1

change只有表单元素支持事件，例如<input> , <select>和 <textarea> .同样，value和 situation不是 <a> 上的有效属性标签，请避免使用它们。

为了做你想做的，你必须绑定(bind)一个函数到click事件到菜单项中的 anchor 。自定义值可以存储在自定义数据属性中，可以通过 jQuery 的 .data() 检索。方法。 situation 的理想替代品属性将使用自定义类。它会是这样的:

HTML:

<a class="dot city-LA">managua</a><br />
<a class="dot city-AA">japon</a><br />
<a class="dot city-GO">goa</a><br />
<a class="dot city-MA">madrid</a><br />

<h2 id="otherMenu" class="menu_class">My menu</h2>
<ul class="the_menu">
    <li><a href="#" data-value="AA">japon</a></li>
    <li><a href="#" data-value="MA">madrid</a></li>
    <li><a href="#" data-value="LA">managua</a></li>
    <li><a href="#" data-value="GO">goa</a></li>
</ul>

Javascript:

$('.the_menu > li > a').click(function(e) {
    e.preventDefault();

    var selectedCity = $(this).data('value');

    if (selectedCity == 'cities') {
        $('a.dot').show(1000);
    } else {
        $('a.dot.city-' + selectedCity).show(1000);
        $('a.dot.city-' + selectedCity).hide(1000);
    }
});