Question

仅获取用户点击它的文本值

HTML代码

<body>
    <div id="test">
        <pre>
        zelketg  1
        gcaotydv  14
        cdbot_i 11
        pacdhss12  1
        boters  1
        <pre>  
    </div>
</body>

在上面的代码中，我使用pre标记，我有一长串用户，所以我希望下一行的每个用户

当用户点击zelketg时，我只想在javascript警告框下面显示zelketg而不是全文。

我尝试了下面的JavaScript，但它没有用，它给了我div下的全文

$(document).click(function(event) {
    var text = $(event.target).text();
    alert(text);
});

Answer 1

预标记的内容无法识别为单个节点，因此您需要执行一些预处理，以便可以将它们标识为单个节点。< / p>

var preNode = document.querySelector( "pre" );
function preCondition()
{
  var text = preNode.innerText;
  preNode.innerHTML = text.split("\n").map( s => "<div>" + s + "</div>" ).join( "" );
}
preCondition();

现在，您可以在 pre - 标记

上添加点击事件处理程序

preNode.addEventListener( "click", function(){
  console.log(event.target.innerHTML);
});

<强>演示

＆＃13;

var preNode = document.querySelector( "pre" );
function preCondition()
{
  var text = preNode.innerText;
  preNode.innerHTML = text.split("\n").map( s => "<div>" + s + "</div>" ).join( "" );
}

preCondition();
preNode.addEventListener( "click", function(){
  console.log(event.target.innerHTML);
});

＆＃13;

<div id="test">
  <pre>
        zelketg  1
        gcaotydv  14
        cdbot_i 11
        pacdhss12  1
        boters  1
   </pre>
</div>

＆＃13;

Answer 2

尝试如下可能有帮助

＆＃13;

$(document).click(function(event) {
    var text = $(event.target).text();
    alert(text);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
    <div id="test">
        <pre>
        <i>zelketg  1</i>
        <i>gcaotydv  14</i>
        <i>cdbot_i 11</i>
        <i>pacdhss12  1</i>
        <i>boters  1</i>
        <pre>  
    </div>
</body>

＆＃13;

Answer 3

事先检查每一行并将其转换为span元素，以便您可以单独处理它们。

＆＃13;

var lines = $("#test pre").text().split("\n");
$("#test pre").empty();
$.each(lines, function(n, elem) {
    $("#test pre").html( $("#test pre").html()+'<span>'+elem+'</span><br>');
});
$('#test pre').click(function(event) {
    var text = $(event.target).text();
    console.log(text);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
    <div id="test">
        <pre>
        zelketg  1
        gcaotydv  14
        cdbot_i 11
        pacdhss12  1
        boters  1
        <pre>  
    </div>
</body>

＆＃13;

@Nisal Edu的后叉

Answer 4

您可以将以下示例替换为整个pre元素，因为您不需要任何其他库。

<body>
    <div id="test">
        <pre id="test_pre">
        zelketg  1
        gcaotydv  14
        cdbot_i 11
        pacdhss12  1
        boters  1
        </pre>  
    </div>
</body>

<script>
    function getText(elem)
    {
        var user_name = elem.childNodes[0].innerHTML;
        var user_id = elem.childNodes[1].innerHTML;
        alert(user_name+","+user_id);
    }
    (function(){
        var pre_tag = document.getElementById("test_pre");
        var pre_text = pre_tag.innerHTML;
        var pre_elem = pre_text.split('\n');
        var doc_string ="" ;
        for(item in pre_elem)
        {
            var arr = pre_elem[item].trim().replace(" ",",").split(",");
            doc_string += "<p onclick='javascript:return getText(this);'><span>"+arr[0] +"</span><span> "+ arr[1] +"</span></p>";       
        }
        document.getElementById("test_pre").innerHTML = doc_string;
    })();
</script>

用户单击它时只获取文本值

4 个答案: