Question

在我的HTML中，我有这样的值

<div class="item" onClick="getcoordinates()">
    <div class="coordinate">
        0.1, 0.3
    </div>
<div>
<div class="item" onClick="getcoordinates()">
    <div class="coordinate">
        0.2, 0.4
    </div>
<div>
....

这些是由django Web服务重复生成的。

我想获得用户点击的协调。例如，如果用户点击0.2,0.4区域，我想得到0.2,0.4字符串。

但是， document.getElementsByClassName（＆＃39; coordinate＆＃39;）; 返回的数组不是特定的协调。

如何获取用户点击的特定字符串？

Answer 1

代码的最小修改方法是将this传递给函数，该函数将是特定div的DOM元素：

<div class="item" onClick="getcoordinates(this)">

然后在该函数中，使用.querySelector上的div查找其.coordinates元素，并从中读取innerHTML：

function getcoordinates(div) {
    var coords = div.querySelector(".coordinates").innerHTML;
    // ...use coords....
}

你可能需要修剪一些空格。现代浏览器对字符串使用trim方法，如果需要可以对其进行填充，因此：

var coords = div.querySelector(".coordinates").innerHTML.trim();

垫片是微不足道的：

if (!String.prototype.trim) {
    String.prototype.trim = function() {
        return this.replace(/^\s+|\s+$/g, '');
    };
}

或者，如果您不喜欢修改String.prototype，请创建一个实用程序函数：

function trimString(str) {
    if (str.trim) {
        return str.trim();
    }
    return str.replace(/^\s+|\s+$/g, '');
}

然后

var coords = trimString(div.querySelector(".coordinates").innerHTML);

FWIW，我将探索摆脱onClick属性并转向使用现代不显眼的技术，但上述内容应该解决这个具体问题。

Answer 2

您可以将onclick属性修改为onclick="getcoordinates(this)"。要获取字符串，您可以：

function getcoordinates(element) {
  var str = element.querySelector('.coordinate').innerText;
}

Answer 3

您缺少结束div标签，请添加它们。

  <div class="item" onclick="getcoordinates(this)">
    <div class="coordinate">
      0.1, 0.3
    </div>
  </div> <!-- missing -->
  <div class="item" onclick="getcoordinates(this)">
    <div class="coordinate">
      0.2, 0.4
    </div>
  </div> <!-- missing -->



function getcoordinates(obj) {
  alert(obj.innerText);
}

Answer 4

在我看来，这是最好的方法。另一方面，我的观点是bubkas，如果你使用Mahesh Sapkal的方法使用this.getElementsByClassName，onClick也会起作用。

<div class="item">
    <div class="coordinate">
        0.1, 0.3
    </div>
</div>
<div class="item">
    <div class="coordinate">
        0.2, 0.4
    </div>
</div>
<script>
var items = document.getElementsByClassName('item');
for(var i=0; i<items.length; i++){
    items[i].addEventListener('click', function(){
        //Use querySelector for an easier current method.
        //console.log(this.querySelector('.coordinate').innerHTML);
        //getElementsByClassName works.
        console.log(this.getElementsByClassName('coordinate')[0].innerHTML);
    });
}
</script>
</body>

顺便说一下。你真的应该使用你的结束标签。

我怎样才能获得相同类重复的类的值？

4 个答案: