2

aタグを選択し、クリックするとそのテキストを表示したい。

つまり、最初のリンクである「One」をクリックすると、。を使用してそのテキスト「One」を表示したいと思いますalert。

2番目のリンク「例」をクリックすると、を使用して「例」というテキストを表示したいと思いますalert。

<body>
    <div id="tree">
        <ul>
        <li><a target="_blank" href="one.html">One</a></li>
        <li class="folder expnded"><a target="_blank" href="two.html">Examples</a></li>
        </ul>
    </div>    
    <div id="display"></div>    
</body>

アップデート1：

答えてくれてありがとう。私が本当にやりたいのは、ツリー構造を作成する必要があり、ツリーリーフノードをクリックすると、そのリーフノードの名前を表示する必要があるということです。

jQuery DynaTreeを使用してツリー構造を作成しましたが、上記のコードではjQueryセレクターが機能していません。

タグまたはタグ内の他の要素を選択できませんdiv。

以下はツリー構造です。

ここに画像の説明を入力してください

これは私の完全なHTMLコードです（上記は単なるサンプルコードです）

<html>
<head>
<!-- Include the required JavaScript libraries: -->
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src='js/jquery-ui-1.8.20.custom.min.js' type="text/javascript"></script>
<script src='js/myjquery.js' type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/ui.dynatree.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery.dynatree.js" type="text/javascript"></script>

</head>

<body>
    <div id="tree">
        <ul>
            <li>one</li>
            <li><a target="_blank" href="">Google</a>
            <li class="folder expnded">Examples
                <ul>
                    <li><a target="content" href="" id="s">one</a>
                    <li><a target="content" href="two.html">two</a>
                    <li class="folder">Folder one
                        <ul>
                            <li><a target="content" href="one.html">one</a>
                            <li><a target="content" href="two.html">two</a>
                        </ul>
                    <li><a target="content" href="three.html">three</a>
                    <li><a target="content" href="four.html">four</a>
                    <li class="folder">Folder two
                        <ul>
                            <li><a target="content" href="one.html">one</a>
                            <li><a target="content" href="two.html">two</a>
                        </ul>
                    <li class="folder">Folder three
                        <ul>
                            <li><a target="content" href="one.html">one</a>
                            <li><a target="content" href="two.html">two</a>
                            <li class="folder">Inner Folder
                                <ul>
                                    <li><a target="content" href="one.html">one</a>
                                    <li><a target="content" href="two.html">two</a>
                                </ul>
                        </ul>
                </ul>
        </ul>
    </div>

    <div id="display">
    <a href="" id="s">one</a>
    </div>

</body>
</html>

私が投稿した写真は、上記のHTMLコードの出力です。

myjquery.jsファイルにこのようなコード（古い）があります

$(function() {
        // --- Initialize sample trees
        $("#tree").dynatree({
            autoFocus : true,
            //          persist: true,
            minExpandLevel : 2,
            onFocus : function(node) {
                // Auto-activate focused node after 1 second
                if (node.data.href) {
                    node.scheduleAction("activate", 1000);
                }
            },
            onBlur : function(node) {
                node.scheduleAction("cancel");
            },
            onActivate : function(node) {
                if (node.data.href) {
                    window.open(node.data.href, node.data.target);
                }
            }
        });
    });

アップデート2：

私の問題の解決策

myjquery.jsファイルでは、次の新しいコードが機能します。上記の古いコードと比較できます。

$(function() {
    // --- Initialize sample trees
    $("#tree").dynatree({
        autoFocus : true,
         persist: true,
        minExpandLevel : 1,
        onFocus : function(node) {
            // Auto-activate focused node after 1 second
            if (node.data.href) {
                node.scheduleAction("activate", 1000);
            }
        },
        onBlur : function(node) {
            node.scheduleAction("cancel");
        },
        onActivate : function(node) {
            if (node.data.href) {
                window.open(node.data.href, node.data.target);
            }
        },
        onClick : function(node) {
            $.ajax({
                type : "GET",
                url : "Display",
                data : {
                    id : node.data.title
                },
                success : function(data) {
                    $("#display").html(data);
                }
            });
        }
    });
});
4

4 に答える 4

6 
$('a', '#tree li').on('click', function(e) {
  e.preventDefault();    // this line is for prevent page reload
  alert($(this).text());
});

デモ

jQueryセレクター.text()についてもっと読む

編集によると

以下のように試すことができます：

$('span[class^=dynatree-exp-c] a').on('click', function(e) {
    e.preventDefault();
    alert( $(this).text() );
});

dynatreeの各リーフノードはdynatree-exp-c、などのようなクラスを持つスパンであるため、クラスが。で始まるスパンを選択するdynatree-exp-c1ために使用します。[class^=dynatree-exp-c]dynatree-exp-c

于 2012-06-06T17:05:27.350 に答える
1 
$('a').click(function(){
    alert($(this).text());
    return false;
});
于 2012-06-06T17:07:54.247 に答える
0

このスクリプトを使用してください。

jQuery('a').click(function(){
   var x = jQuery(this).text();
    alert(x);
});​

これがデモです

于 2012-06-06T17:07:54.113 に答える
0 
$('a').click(function(e){
    alert( $(this).text() );
    e.preventDefault();
});
于 2012-06-06T17:12:28.283 に答える