Question

我有一些HTML标记：

<div id="content">
    <h3>blablalba</h3>
    <p>paragraph1</p>                                 
    <p>paragraph2</p>
    <p>paragraph3</p>
    <h3>blablabla</h3>
    <p>paragraph4</p>
    <p>paragraph5</p>
    <p>paragraph6</p>
</div>

一个突出显示所有标签的功能（重要的是：我需要突出显示所有标签）以及我需要知道的类，如果它是一个段落。

function myClass (input) {
    this.input = input;
    //on init
    init = function() {
        alert(input); //Point to determine if it is a paragraph
    };
    init();
};

$(function() {
    $("#content *").hover( function () {
        $(this).css("border", "1px solid blue");    //  style to mark (highlight) the tag
        return false;
    },
    function () {
        $(this).css("border", "none");  //  unmark the tag
    }).click( function () {
            var inst = new myClass($(this).html());
    });
});

如何点击段落，而不是其他标签，我怎么能找到。

示例http://jsfiddle.net/rvvbf4L1/1/

提前致谢。

Answer 1

在点击处理程序中，您只需使用$(this).is('p')来测试点击的元素是否为段落。

<强> jsFiddle example

Answer 2

发生事件时，会创建一个事件对象。从该事件对象中，您可以获得一些额外的信息。例如，您可以单击目标元素。

$('.selector').click(function(evtObj){
    if (evtObj.target.tagName === "P"){ // note the capital P
        // do stuff
    }
});

Answer 3

这是一个简单的解决方案：http://jsfiddle.net/1c1nr9sp/5/

$('p').on('click', function(){
    console.log('clicked on a paragraph');
});

Answer 4

请尝试此

$(function () {
    $("#content *").hover(function () {
        $(this).css("border", "1px solid blue"); // style to mark (highlight) the paragraph
        return false;
    },

    function () {
        $(this).css("border", "none"); //   unmark the paragraphs
    }).click(function (e) {
        var inst = new myClass(e.target.nodeName);
    });
});

我所做的更改是var inst = new myClass(e.target.nodeName);

Reference

FIDDLE DEMO

Answer 5

我不知道这是不是你想要的，但是你走了！：

<!DOCTYPE html>
<html lang = 'es'>
    <head>
        <title> My Test </title>
        <style>
                p:hover{
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div id="content">
            <h3>Title</h3>
                <p>paragraph1</p>                                 
                <p>paragraph2</p>
                <p>paragraph3</p>
            <h3>Title</h3>
                <p>paragraph4</p>
                <p>paragraph5</p>
                <p>paragraph6</p>
        </div>
        <script type="text/javascript">
            var tagList = document.getElementsByTagName('p');
            var index;

            for(index in tagList){
                tagList[index].addEventListener('click', consoleMessage);
            }

            function consoleMessage(){
                console.log('Clicked on a paragraph');
                alert('Clicked on a paragraph');
            }
        </script>
    </body>
</html>

如何确定我是否点击了标签<p>中的内容？

5 个答案: