-1

Web ページに次のコードがありますが、何らかの理由で機能していません。spans クラス属性を変更しようとする 2 つの方法がありますが、機能していません。間違っている場所を教えてください。:)

<script language="javascript">
    function ChangeClass()
    {
        alert("Clicked!");
        document.getElementById("Search").className = "non-activeTab";
        alert("Changed class!");
        //does not work
    }

    window.onload = function()
    {
        document.getElementById("Search").addEventListener('click' , ChangeClass );
        var elm = document.getElementById("Search").className;
        alert("LOADED PAGE " + elm);
        //this works
    }
    function someFunction(abc,elm) {
        alert(abc + "/" + elm);
        //does not work
    }
</script>

<div class="tabs" id="tabs">
    <div class="tabOutline" id="outline" >
        <span class="activeTab" id="Search" onclick="someFunction('two',this.className)">
            Search
        </span>
    </div>
</div>
4

1 に答える 1

1

コードは機能しますが、期待どおりには機能しません。onclick最初に実行されるようです。つまり、変更className 前が表示されます。実際には変更されますが、もう一度クリックするまで表示されません。

onclickこれは、eventlistener と属性の両方を同じコンテキストで使用することがなぜ悪い考えなのかを示す良い例です。実行順序は明確ではありません。

より少ないコードで同じことを実現するには、次のようにします。

<span class="active" onclick="this.className='inactive'">...</span>

また：

<script>
  onload = function () {
    document.getElementById('search').addEventListener('click', function (e) {
      e.target.className = 'inactive';
    });
  };
</script>
<span id="search" class="active">...</span>

CSS を使用して、この種のことを簡単にテストできます。

<style>
  .active { color: red; }
  .inactive { color: blue; }
</style>
于 2013-09-14T12:34:59.790 に答える