は、私はこれでそんなにトラブルを抱えていることを信じることができない別の事業部

のロールオーバーにPエレメントのテキストを置き換えます。 Googleの最初の結果がそれを行うだろうと思った。私はイメージをロールオーバーして、p要素のテキスト（モジュールの選択）を別の事前定義されたテキストに置き換えることができるようにしようとしています。私のマウスが画像を残すと、p要素はデフォルトテキスト（モジュールの選択）に戻ります。は、私はこれでそんなにトラブルを抱えていることを信じることができない別の事業部

これは、あなたのbind()関数の後に閉じたときに問題がある、私が持っているものではありませんが、スクリプトからの応答...

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 

<script> 
    $('p#module_1').bind('mouseover', function() { 
     $('p#module_main').text('Module 1'); 
    }); 
}); 
</script> 
</head> 
<body> 

<p id="module_main">Select a Module</p> 

<p id="module_1">Icon 1</p> 
<p id="module_2">Icon 2</p> 

</body> 
</html>

出典

2016-05-24 Victor Elias Rodriguez

あなたは、二重使用している理由 '}）;'。ただ削除してください。そして、それを$（document）.ready（function（）{...}） –

syntax error additional '}）;'スクリプトタグ内に入れてください： –

。 DOM準備関数を追加する必要があります。

$(document).ready(function(){ 
    $('p#module_1').bind('mouseover', function() { 
     $('p#module_main').text('Module 1'); 
    }); 
});

See this working fiddle

出典

2016-05-24 16:48:19

Vincentさん、ありがとうございます。アイコンから離れたときに「モジュールを選択」にリセットされますか？再度、感謝します。 –

mouseout（）関数を追加します：https://jsfiddle.net/j0kdg7f6/2/ –

ありがとうございました –

いくつかのポイント：

（1）.bind()はjQueryの1.7で非推奨と.on()で置換しました。構文は事実上同一です。

（2）.on()のみが既にレンダリングされた後にDOMに追加された要素のために必要とされます。あなたが最初の表示された後のページに新しいコンテンツを注入言い換えれば、あなたは.on()を使用する必要があります。それ以外の場合は必要ありません。以下のコードのmouseoutの例を参照してください。ちなみに、これはをevent delegationと呼ばれ、約読む価値がされています。

（3）Vincentは既に指摘したように、すべてのDOM要素が存在するのを待ってからイベント監視コードをそれらの要素にバインドしようとするコードを作るにはdocument.readyが必要です。そうでないと、の前に要素が存在し、バインディングが成功しない（コードはまだ存在しないものにバインドされますか？） - これはあなたが見ていたものです。コードがpタグを見ていないため、マウスオーバーが検出されませんでした。

$(document).ready(function(){ 
 

 
    $(document).on('mouseover', '#module_1', function() { 
 
     $('#module_main').text('Module 1'); 
 
    }); 
 
    
 
    $('#module_1').mouseout(function() { 
 
     $('#module_main').text('ICON 1'); 
 
    }); 
 

 
}); //END document.ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p id="module_main">Select a Module</p> 
 

 
<p id="module_1">Icon 1</p> 
 
<p id="module_2">Icon 2</p>

出典

2016-05-24 17:03:40 gibberish

ありがとうございます –

あなたのpタグがDOMにロードされる前にバインド機能が呼び出されているので、それが機能していない理由があります。上記の答えが働く理由は、すべてのhtml要素がdomにロードされるまでバインド関数の実行を遅らせることです。あなたがダウンしたpタグの下にスクリプトタグを移動（およびスクリプトタグ内の最後の行を削除する）場合は、理由の一連のイベントで、あまりにも動作します。

出典

2016-05-24 17:06:17

は、私はこれでそんなにトラブルを抱えていることを信じることができない別の事業部

答えて

関連する問題