js clickイベントハンドラを使用してCSSプロパティを設定します

配列の要素を表示/非表示にするonclickイベントを作成しようとしていますが、showSubTabGroup（）関数では苦労しています。js clickイベントハンドラを使用してCSSプロパティを設定します

サイドノート：最終的には、以下のように、「クリック」ではなく、onmouseenterとonmouseleaveとしたいと思います。

ナビゲーション機能から期待されるように、divをクリックして後続のdivを表示したいと考えています。

コンソールはエラーを返さないため、「クリック」機能が警告（「CLICKED」）になっているようです。

ご協力いただければ幸いです。

問題：

Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) { 
    this.tab[tabIndex].addEventListener('click', function() { 
    alert("CLICKED");//Testing 'click' call 
    for (var i = subTabIndex; i < this.subTabGroup; i++) { 
     this.subTab[i].style.display = ""; 
    } 
    }); 
}

Javascriptを：

function Tab (subTabGroup) { 
    this.tab = document.getElementsByClassName("tab"); 
    this.subTab = document.getElementsByClassName("sub-tab"); 
    this.subTabGroup = subTabGroup; 
} 

Tab.prototype.hideSubTabs = function() { 
    for (var i = 0; i < this.subTab.length; i++) { 
    this.subTab[i].style.display = "none"; 
    } 
} 

Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) { 
    this.tab[tabIndex].addEventListener('click', function() { 
    for (var i = subTabIndex; i < this.subTabGroup; i++) { 
     this.subTab[i].style.display = ""; 
    } 
    }); 
} 

var tab = new Tab(3); 
tab.hideSubTabs(); 
tab.showSubTabGroup(0,0);

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Responsive Nav</title> 
</head> 
<body> 
    <!-- JQuery CDN --> 
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script> 

    <div class="container"> 
    <div class="tab"> 
     <p>TAB</p> 
    </div> 
    <div class="sub-tab"> 
     <p>SUBTAB</p> 
    </div> 
    <div class="sub-tab"> 
     <p>SUBTAB</p> 
    </div> 
    <div class="sub-tab"> 
     <p>SUBTAB</p> 
    </div> 
    </div> 

    <div class="container"> 
    <div class="tab"> 
     <p>TAB</p> 
    </div> 
    <div class="sub-tab"> 
     <p>SUBTAB</p> 
    </div> 
    <div class="sub-tab"> 
     <p>SUBTAB</p> 
    </div> 
    <div class="sub-tab"> 
     <p>SUBTAB</p> 
    </div> 
    </div> 

    <div class="container"> 
    <div class="tab"> 
     <p>TAB</p> 
    </div> 
    <div> 
     <div class="sub-tab"> 
     <p>SUBTAB</p> 
     </div> 
     <div class="sub-tab"> 
     <p>SUBTAB</p> 
     </div> 
     <div class="sub-tab"> 
     <p>SUBTAB</p> 
     </div> 
    </div> 
    </div> 

    <script type="text/javascript" src="tab.js"></script> 
    <script type="text/javascript" src="tabEvents.js"></script> 

</body> 
</html>

出典

2016-10-21 Steven M.

'はconsole.log（これ）を使用していることを変更する必要があります;' – epascarello

：私は少ないコードで同じことをするでしょうなぜないjQueryの関数を求めることができる場合。これはあなたのタブコードではなく、クリックした要素への参照です。あなたは、バインド

Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) { 
    this.tab[tabIndex].addEventListener('click', (function() { 
    for (var i = subTabIndex; i < this.subTabGroup; i++) { 
     this.subTab[i].style.display = ""; 
    } 
    }).bind(this)); 
}

出典

2016-10-21 12:56:51 epascarello

これは完璧です！どうもありがとうございます！ :) –

私はbind（）を調べる必要があります。 –

私はあなたのポストを読んで、私は（hideSubTabsを想定）が正常に動作しています。その場合、私はshowSubTabGroup（）で使用することをお勧めします：

this.subTab[i].style.display = "initial";

代わりの

this.subTab[i].style.display = "";

を「初期」、例えばそのデフォルトに設定されますdivの「ブロック」とスパンの「インライン」

jQueryも含まれています。クリック内側thisで何の問題

$('.tab').on('click',function() { 
    $(this).closest('.container').find('.sub-tab').toggle() 
}) 

$('.tab').click(); 
$('.tab')[0].click();

出典

2016-10-21 12:40:02 hakany

jQueryのは、あなたがものを使用しているライブラリのコードの知識ベースがあると知って、以下のコードを持っていることはありませんか？ ;） – epascarello

thats正しいものがあるが、既に含まれているライブラリコードのKBがあります。あなたはたぶんタブを開いたり、他の何か、おそらく他の派手なものをスライドさせたいでしょう。これによりコードはより複雑になります。なぜ私は再び車輪を発明するのかという理由で頼んでいただけです。 – hakany

js clickイベントハンドラを使用してCSSプロパティを設定します

答えて

関連する問題