Question

我想为此做一个小提琴，但因为它已经在线了，而且因为我不知道那么好，我觉得我需要很长时间才能把它弄好。所以......

代码就在那里。你们都可以看到问题所在......

问题：我需要它保持当单击OIL，MILITARY，MISC选项卡时，第一个矩形边框为红色（就像现在第一次滚动它们时一样）。当单击油标签上的第二个，第三个等矩形时，需要从当前所在的边框移除边框并将其应用于刚刚单击的边框。再次，将MILITARY和MISC选项卡上的第一个矩形保持为红色边框选择。

代码工作，几乎完全按照需要，但在花了几个小时尝试谷歌和几次重写代码后（你可以看到我的一些尝试在代码中注释掉），我无法弄清楚出了什么问题

加载页面时，会选择TEST矩形。当您测试2（或任何其他）时，红色边框将从TEST中移除并应用于测试2（或单击任何一个）。单击任何其他时，红色边框将保留并添加到新边框...但是当TEST被重新点击（并再次获得边框），然后单击（例如，再次单击TEST 2）时，边框被删除了......但它只适用于TEST。

我的问题是：我做错了什么？为什么它看起来好像是

var active_tab_selector2 = $('a[href='+active_div_data+']');
$(active_tab_selector2).parent('div').removeClass('selected');

是否缓存

并且不会在每次点击时重新运行？

编辑:(更多代码）：

$("#lewy section div a").click(function(e) {
    e.preventDefault();

    var target_tab_selector2 = $(this).attr('href');

    var active_div = $("#lewy div div.active a");
    var active_div_data = $("#lewy div div.active a").data('default');

    var active_tab_selector2 = $('a[href='+active_div_data+']');
    $(active_tab_selector2).parent('div').removeClass('selected');
    $(active_div).attr('data-default',target_tab_selector2);

    var target = $('a[href='+target_tab_selector2+']');
    $(target).parent('div').addClass('selected');

    $.ajax({
       type    : "POST",
       cache   : false,
       url     : "mapStructureDisplay.php?s",
       data    : {'X': target_tab_selector2},
       success: function(data) {
        $("#secondary").html(data);
       }
      });

     });
  });

<div id="lewy" style="background-image:url('images/308.png');">
    <div id="outer">
    <div id="inner" class="active"><a href="#Div1" class="button" data-default="#str1">OIL</a></div>
    <div id="inner"><a href="#Div2" class="button" data-default="#str7">MILITARY</a></div>
    <div id="inner"><a href="#Div3" class="button" data-default="#str9">MISC</a></div>
    </div>
        <section id="Div1" class="active">
        <div id="structure" class="selected"><a class="button2" href="#str1">TEST</a></div>
        <div id="structure"><a class="button2" href="#str2">TEST 2</a></div>
        <div id="structure"><a class="button2" href="#str3">TEST 3</a></div>
        <div id="structure"><a class="button2" href="#str4">TEST 4</a></div>
        <div id="structure"><a class="button2" href="#str5">TEST 5</a></div>
        <div id="structure"><a class="button2" href="#str6">TEST 6</a></div>
        </section>
        <section id="Div2" class="hide">
        <div id="structure" class="selected"><a class="button2" href="#str7">TEST DIV 2</a></div>
        </section>
        <section id="Div3" class="hide">
        <div id="structure" class="selected"><a class="button2" href="#str9">TEST DIV 3</a></div>
        </section>
</div>
<div id="srodek">
&nbsp;
</div>
<div id="prawy" style="background-image:url('images/246.png');">
<div id="secondary">TEST</div>
</div>
</div>

Answer 1

尝试更改：

$(active_div).attr('data-default',target_tab_selector2);

为：

$(active_div).data('default',target_tab_selector2);

第一次使用data-XXX访问jQuery时，jQuery会缓存.data()属性，并且不会再次获取它们。因此，当您使用.attr()来读取属性时，不会看到使用.data('default')修改它们。您应保持一致，使用.attr进行所有设置和阅读，或.data，但不要混用它们。

Jquery点击; ajax，工作但不完全按照预期

1 个答案: