divに応じて異なる値を返す

Question

クリックしたdivに応じて文字列を返す関数を書く必要があります。

<div id="footer"> 
<table> 
    <tr> 
<td><div id="selectpeg1" onclick="selectPeg()"></div></td> 
<td><div id="selectpeg2" onclick="selectPeg()"></div></td> 
<td><div id="selectpeg3" onclick="selectPeg()"></div></td> 
<td><div id="selectpeg4" onclick="selectPeg()"></div></td> 
    </tr> 
</table> 

selectPeg（）関数は、文字列または（また、文字列として）CSSファイルにある「背景」のパラメータを返すためにいずれかがあります。私が最初にペグをクリックした場合、私は関数が返す二ペグ「赤」などをクリックするのであれば、機能は...、「青」を返すことができ

CSS：

#selectpeg1 { 
width: 50px; 
height: 50px; 
background: yellow; 
-moz-border-radius: 25px; 
-webkit-border-radius: 25px; 
border-radius: 30px; 
border-style: solid; 

}

Answer 1

あなただけJavaScriptとjqueryのない使いたいならば、あなたは次のように変更を加える必要があります。 HTMLでの関数呼び出しの

1. パスこれを：

   機能selectPeg：

   のonclick = "selectPeg（これは）" Javaスクリプト機能で

2. は、関数の引数を追加します（要素）

要素からデータを簡単に取得できるよりも変数。 CSS variablesでdata-attributesを組み合わせる

function selectPeg(element) { 

    var id = element.id 
    var backgroud = element.style.background 
    var color = element.style.color 

    // do anything you want to do 
} 

Answer 2

例1：あなたが 'データ' は属性を使用することができますhttps://jsfiddle.net/sheriffderek/nLfvrey7/

...彼らは何も... data-bananas='2'またはあなたが望む何もすることができます。 - そう、私はhttp://youmightnotneedjquery.com/

をしかし、ここで重要な概念である：

var $thing = $('.thing'); // cache node you'll use early 

function getInfo(target) { // function that gets info from a given target 
    var info = $(target).data('info'); // check target for data-info 
    alert(info); // do something with that info 
} 

$thing.on('click', function() { // attach click event listener 
    getInfo(this); // run function where the target is 'this' - the thing that got clicked... 
}); 

あなたは確かにjQueryせずにこれを書くことができますいくつかのjQueryを使用して

<ul class="thing-list"> 
    <li class="thing" data-info='one'>one</li> 
    <li class="thing" data-info='two'>two</li> 
    <li class="thing" data-info='three'>three</li> 
</ul> 

JavaScriptの..最も速くて読みやすいものを書くだけです。ほとんどの場合、jQueryをスキップしようとするのは、現在のパックの考え方であり、多くの場合、多くの理由があります。ここ

は楽しみのために色の変更との完全な例です。

例2：https://jsfiddle.net/sheriffderek/dm4pofuz/

Answer 3

はクリーンソリューションを提供します。

function onSelectorClick(event) { 
 
    console.log(this.dataset.color); // TODO: do something with color 
 
} 
 

 
document.querySelectorAll(".selector").forEach(element => { 
 
    element.style.setProperty("--color", element.dataset.color); 
 
    element.addEventListener("click", onSelectorClick); 
 
});

.selector { 
 
    width: 50px; 
 
    height: 50px; 
 
    border-style: solid; 
 
    border-radius: 30px; 
 
    background-color: var(--color, white); 
 
}

<table> 
 
    <tr> 
 
    <td><div class="selector" data-color="red"></div></td> 
 
    <td><div class="selector" data-color="blue"></div></td> 
 
    <td><div class="selector" data-color="green"></div></td> 
 
    <td><div class="selector" data-color="yellow"></div></td> 
 
    </tr> 
 
</table>