1

私は jQuery の初心者で、次のことを達成したいと考えています。ページの要素をクリックするたびに、その中のテキストの色を赤に変更したいと考えています。これは私が持っているものですが、機能しません。驚くべきことに、alert ステートメントも何も出力しません。しかし、別のアラートステートメントでテストしたように実行されます。ありがとう。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <div>Cow</div>
    <div>Cat</div>
    <p>paragraph</p>
    <p>coconut</p>

    <script type="text/javascript" src="../Scripts/jquery-2.0.3.js"></script>
    <script type="text/javascript">
        $(this).click(function () {
            var v = $(this).text();
            alert(v); // this prints nothing !!!!
            $(this).css("color", "red");
        });
    </script>
</body>

4

6 に答える 6

3

クリック ハンドラーを にアタッチするdocumentと、ドキュメントにバブル アップするクリックはイベント リスナーに送られます。リスナー内で を探すとevent.target、それがイベントを開始したノードになります。

$(document).click(function (event) {
  $(event.target).css("color", "red");
});

例: http://jsfiddle.net/E9H22/

于 2013-11-02T22:31:11.167 に答える
1

それをドキュメントの準備完了ステートメントでラップし、クリック リスナーを実際の要素にアタッチする必要があります。

$(function(){
  $("*").click(function () {
    $(this).css("color", "red");
  });
});

$("div, p").click(...)アクティブにしたい要素に応じて、セレクターは次のようになります。

于 2013-11-02T22:26:31.490 に答える
1

body要素を ( の代わりにthis)指定すると、次のように機能します。

$('body').click(function () {
    var v = $(this).text();
    alert(v); // this prints something, now.
    $(this).css("color", "red");
});

JS フィドルのデモ。

もちろん、次を使用することもできます。

$(this.document.body).click(function () {
    var v = $(this).text();
    alert(v); // this prints something, now.
    $(this).css("color", "red");
});

JS フィドルのデモ。

clicked-element のみテキストを赤くしたい場合:

$('body').click(function (e) {
    $(e.target).css("color", "red");
});

JS フィドルのデモ。

于 2013-11-02T22:27:32.530 に答える
1 
$(this).click(function () {

これはあなたの問題です。

と言う代わりにthis、CSS セレクターを使用して、どの要素が色を変えるかを指定する必要があります。

たとえば、次のように試すことができます

$('div').click(function() { // Will change the color of the divs
     var v = $(this).text();
     alert(v); // this prints nothing !!!!
     $(this).css("color", "red");
}); 
$('p').click(function() {  // Will change the paragraphs
    ...
}); 
$('p, div').click(function() {  // Will work for either one!
    ...
}); 
$('*').click(function() {  // Will work for any element on the page
    ...
});
于 2013-11-02T22:27:40.257 に答える
1

あなたの

$(this).click(function () {

「this」は <script> タグの場所ではなく、window オブジェクトを指します。したがって、本質的にあなたのコードはこれを行います：

$(window).click(function (){

牛をクリックして赤くしたい場合は、HTML を次のように変更します。

<div id="cow">Cow</div>

そしてあなたのスクリプト：

// callback needs to be inside $(document).ready(fn) to make sure the DOM is ready when trying to use it
$(document).ready(function () {
    // and we need to refer to an explicit element
    $('#cow').click(function (){
        // now we can refer to "this", since inside the click handler's context is the clicked element
        $(this).css({color: 'red'});
    });
}
于 2013-11-02T22:30:01.313 に答える
1

クリック イベントを追加する要素を指定する必要があります。たとえば、これはすべての div 要素で機能します。

$('div').click(function () {
    $(this).css("color", "red");
});
于 2013-11-02T22:30:06.877 に答える