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文件中的“background”参数（也作为一个字符串）。所以，如果我点击第一个挂钩，该功能可以返回“蓝色”，如果我点击第二个挂钩，该功能返回“红色”等等......

CSS：

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

}

Answer 1

示例1：https://jsfiddle.net/sheriffderek/nLfvrey7/

您可以使用＆＃39;数据＆＃39;属性......它们可以是任何东西...... data-bananas='2'或任何你想要的东西。

<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

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的情况下写这个：http://youmightnotneedjquery.com/

但这里的关键是概念性的 - 所以，我只是写出最快，最具可读性的东西。在大多数情况下 - 尝试跳过jQuery只是当前的包装心态，并且在很多情况下并没有太多理由。

这是一个完整的例子，颜色随着变化而变化：

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

Answer 2

如果你只想使用javascript而不是jquery，那么你需要进行以下更改。

在html中的函数调用中传递它：

的onclick = “selectPeg（这）”
在java脚本函数中添加一个函数参数：

function selectPeg（element）

比您可以轻松地从元素变量中获取数据。

function selectPeg(element) {

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

    // do anything you want to do
}

Answer 3

将data-attributes与CSS variables结合起来提供了一个干净的解决方案：

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>

根据点击的div返回不同的值

3 个答案: