単一の機能で複数のCSSイベントを制御する

私はいくつかのスクリプトでユーザアクションに基づいてCSSを変更しようとしています。現在、私はそれぞれのnavBarボタンが5つの関数onClickを実行しています。 5つの異なるdivのCSSを変更するにはそれぞれ1私はスクリプティングの方が新しいので、私は次の人が来るのを助けるだけでなく、将来を参照するために私がやっていることに似た例を作りたいと思っていました。単一の機能で複数のCSSイベントを制御する

誰かがこの短い例で私を助けてくれますか？私は多くの様々なスクリプトを試して、ちょうど私の精神を破壊してしまう。

このため、navBarのopenButtonをクリックして、ページ上の対応するdivの幅を変更する（本質的に開く）必要があります。

<div id="navBar"> 
<a id="div1OpenButton" class="openButton" onClick="openDiv()">div1</a> 
<a id="div2OpenButton" class="openButton" onClick="openDiv()">div2</a>  
<a id="div3OpenButton" class="openButton" onClick="openDiv()">div3</a> 
</div> 

<div id="main"> 
<div id="div1"></div> 
<div id="div2"></div> 
<div id="div3"></div> 
</div> 

<style> 
#div1 {width: 0px;} 
#div2 {width: 0px;} 
#div3 {width: 0px;} 
</style>

出典

2016-08-30 scott fuller

あなたのHTMLにはonclickが使用されています。これは悪い習慣です。あなたはseparation of concernsがあなたのJSを別のファイルに入れたいと思っています。

あなたは（このようなユースケースのための良いライブラリが）、あなたは同時に5つのすべての要素を選択するために、その強力なセレクタを使用することができますjQueryを使用している場合。 jQueryのセレクタは、CSSでセレクタを使用する方法と同じであるため、初心者には最適です。

私は自分のJSをHTMLではなくIDでHTMLに添付したいと思っています。このようにして、あなたのJSに固有のHTMLターゲットが付いていることがわかります。その後、一緒にこのすべてを置く

、すべてのボタンを選択するために、jQueryのセレクタを使用し、匿名関数であなたのCSS操作をカプセル化する.click()イベントを使用します。

$(".openButton").click(function() { 
    $("#div1, #div2, #div3").css("width", "500px"); 
});

出典

2016-08-30 15:48:14 staypuftman

私はあなたが本当にあなたがに適用されますあなたのCSSのクラスを持っている必要があり、あなたのjqueryのにあなたのCSSをコーディングしないことをここに追加しますあなたの要素を削除するか、あなたの行動に基づいて削除します。 – VikingBlooded

これはjquery彼がjavascriptを使用して、むしろjquery – mean

この

<html><head> 
<script src=path/to/jquery.js></script> 
</head><body> 
<div id="navBar"> 
<!-- openDiv(1) with "1" is the div number --> 
<a id="div1OpenButton" class="openButton" onClick="openDiv(1)">div1</a> 
<a id="div2OpenButton" class="openButton" onClick="openDiv(2)">div2</a>  
<a id="div3OpenButton" class="openButton" onClick="openDiv(3)">div3</a> 
</div> 

<div id="main"> 
<div id="div1">div1 opened</div> 
<div id="div2">div2 opened</div> 
<div id="div3">div3 opened</div> 
</div> 

<style> 
div#main div {overflow:hidden;width:0px} //to hide div content while closed 

</style> 

<script> 

function openDiv(n) { 
$('#div'+n).width(400);} // set width to 400px 
</script> 
</body></html>

をお試しくださいまたはインラインでない場合onClick()

<html><head> 
<script src=path/to/jquery.js></script> 
</head><body> 
<div id="navBar"> 
<a id="div1" class="openButton" >div1</a> 
<a id="div2" class="openButton" >div2</a>  
<a id="div3" class="openButton" >div3</a> 
</div> 

<div id="main"> 
<div id="div1">div1 opened</div> 
<div id="div2">div2 opened</div> 
<div id="div3">div3 opened</div> 
</div> 

<style> 
div#main div {overflow:hidden;width:0px} //to hide div content while closed 

</style> 

<script> 

$('a.openButton').click(function() { 
var itm = $(this).attr("id"); 
$("#main div#"+itm).width(400);});// set width to 400px 
</script> 
</body></html>

出典

2016-08-30 15:52:30 MoolsBytheway

これを行うより良い方法がありますが、コードの行に続いて、表示する要素のIDなどのopenDiv関数にパラメータを渡す必要があります。

<a id="div1OpenButton" class="openButton" onClick="openDiv('div1')">div1</a>

あなたのonClick関数は、あなたの「メイン」内のすべてのdivを非表示にし、あなただけのparamから渡されたIDのみを表示するようにしなければなりません。

さらにヘルプが必要な場合は、コードを貼り付けてください。

出典

2016-08-30 15:52:46 niboc

<a id="div1OpenButton" class="openButton" onClick="openDiv(this)">div1</a> 
<script> 
    function openDiv(e){ 
     document.getElementById(e.innerHTML).style.width= '20px' 
    } 
</script>

出典

2016-08-30 15:54:13 mean

まず、は同じファイルにHTML、CSSおよびJavaScriptを混在させないでください。 .jsファイルにJavaScriptコードを、外部スタイルシートにスタイルを書く必要があります。
element.addEventListener()を使用してJavaScriptコード内のイベントにハンドラを追加します。
ボタンのデータ属性を使用してターゲットdivとリンクします。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width,initial-scale=1"> 
    <title>My page</title> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    </head> 
    <body> 
    <div id="navBar"> 
     <a class="openButton" data-target="div1">div1</a> 
     <a class="openButton" data-target="div2">div2</a> 
     <a class="openButton" data-target="div3">div3</a> 
    </div> 

    <div id="main"> 
     <div id="div1" class="container hide"></div> 
     <div id="div2" class="container hide"></div> 
     <div id="div3" class="container hide"></div> 
    </div> 
    </body> 
</html>

そしてscript.jsファイルに：

document.addEventListener('DOMContentLoaded', function(event) { 
    var divs = document.querySelectorAll('.openButton'); 

    for (var i = 0; i < divs.length; i++) { 
    divs[i].addEventListener('click', openDiv); 
    } 
}); 

function openDiv(e) { 
    // Use e.target.dataset.target 

    // Add 'hide' class on all containers 
    var containers = document.querySelectorAll('.container'); 
    for (var i = 0; i < containers.length; i++) { 
    containers[i].classList.add('hide'); 
    } 

    // Remove 'hide' class on the container to display 
    document.getElementById(e.target.dataset.target).classList.remove('hide'); 
}

出典

2016-08-30 16:18:29

それはすべて別のファイルにありますが、私は1 divが幅の変更を受け取ったときに、私は0pxに戻って他の人にしたいと指摘している必要があります。 –

私は私の答えを編集しました。要素を非表示にするには、CSSクラスを使用します。 –

これは素晴らしいソリューションです、ありがとうございます！ –

単一の機能で複数のCSSイベントを制御する

答えて

関連する問題