このセレクタがimageで動作していないjQuery -- javascript フィールド と jquery フィールド と html フィールド と css フィールド 関連 問題

jQuery this selector not working on Image












2
vote

問題

日本語

OK、私は「MashupButton」の同じIDを持つ画像の束を持っていますが、「#mashupbutton」の代わりに「この」を使用してjQueryをクリックすると、jQueryのクリック機能を作るという印象の下にありました。画像をクリックした機能。これは私にとって働いていますが、ページ上のそのIDを持つ最初のイメージだけでは、もう一度終わった後、それはもう機能しません。

文書が準備完了:

<事前> <コード> ERROR: This node was not found in the expected index. 1

タグは次のようなものです:

<事前> <コード> ERROR: This node was not found in the expected index. 2

それでは明確にするために: ID MashupButtonで10画像をすべて言っています - 私はクリックされたときにその特定のイメージに対して実行されるjQuery効果を持っています。ただし、すべてがすべて同じIDを含んでいても、これらの画像の最初の画像でのみ機能します。私はそれぞれのためにユニークなIDを持っている必要があるか、どういうわけかこのように達成されることができますか?

英語

Ok, I have a bunch of images with the same ID of "mashupButton", however I was under the impression that if I make a jQuery click function using "this", instead of "#mashupButton" it would only perform the function on the image clicked. This works for me, but only for the first image with that ID on the page, and after I've done it once, it no longer works.

After document is ready:

$("#mashupButton").click(function()                 {                     $(this).effect("drop", {direction:"up"}, 1000);                 }); 

Tag is like:

<a href="#" onClick="differentFunction"><img src="imagename.png" id="mashupButton"></a> 

So to clarify: I have say 10 images all with the ID mashupButton - I have a jQuery effect that is performed on that specific image when it is clicked. However it only works on the FIRST of those images, even though they all contain the same ID. Do I need to have unique ID's for each one, or can it be achieved this way somehow?

</div
           

回答リスト

1
 
vote
vote
ベストアンサー
 

代わりにそれらの画像のクラスを作成してからjQueryを使用してクリックをすべての画像に追加します。

<事前> <コード> $(".mashupButton").click(function() { $(this).effect("drop", {direction:"up"}, 1000); }); <a href="#" onClick="differentFunction"><img src="imagename.png" class="mashupButton"></a>
 

Instead create a class for those images and then use jQuery to add the click to all the images.

$(".mashupButton").click(function()                 {                     $(this).effect("drop", {direction:"up"}, 1000);                 });   <a href="#" onClick="differentFunction"><img src="imagename.png" class="mashupButton"></a> 
</div
 
 
     
     
8
 
vote

「ID」属性の値は、ページ内の一意のでなければなりません。 「束」の画像の「ID」として「MashupButton」を再利用するのは正しいマークアップではありません。各 <img> タグには、それ自体の一意の "ID"(または全く "ID"が含まれていない)が必要です。 「class」属性を使用して、 <img> 要素を「クリック」ハンドラの候補としてマークすることができます。

 

The values for "id" attributes must be unique within a page. It is not correct markup to re-use "mashupButton" as the "id" for a "bunch" of images. Each <img> tag must have its own unique "id" (or no "id" at all, of course). You could use the "class" attribute to mark such <img> elements as being candidates for your "click" handler, of course.

</div
 
 
2
 
vote

私はid mashupbutton

を使って10画像をすべて言っています

同じIDを持つ複数の要素を持つことは違法です。

1つのセレクタを使用したい場合は、クラス名を追加する必要があります。

 

I have say 10 images all with the ID mashupButton

It is illegal to have more than one element with the same id.

If you want to use one selector, you should add a classname.

</div
 
 
2
 
vote

@ PANTYの回答を展開する...はい、ID値は一意である必要があります。マークアップを変更できる場合は、ID属性をクラス属性に変更してください。

<事前> <コード> <img src="imagename.png" class="mashupButton" ...

それからあなたのjQueryは次のようになります:

<事前> <コード> $( '.mashupButton' ).click( function() ...
 

To expand on @Pointy's answer... yes, the id values must be unique. If you can change the markup, simply change the id attributes to class attributes.

<img src="imagename.png" class="mashupButton" ... 

Then your jQuery would look like:

$( '.mashupButton' ).click( function() ... 
</div
 
 
2
 
vote

構文的に無効なページを持っています。トラブルがある場合は、常にあなたのHTML を検証する必要があります(そしてそれ以上検索する前にCSS を検証してください。

 

You have a syntactically-invalid page. When you have troubles, you should always validate your HTML (and validate your CSS) before looking any further.

</div
 
 

関連する質問

1  Easy CSSカスタマイズのためのHTMLを設計するためのガイドライン  ( Guidelines for designing html for easy css customization ) 
SaaSプロジェクトをしています、そして、私たちは「彼の」WebサイトのためにCSSページをアップロードできるようにします。 (実際には、すべての顧客のサイトは仮想ホスティングを使用して私たちがホストされています)。 CSSを適用できるように、ページのHT...

4  連続文字列はTDで包まれていない  ( Continuous string not getting wrapped in td ) 
固定幅TDに長い連続文字列を置くと、ラップされていません。文字列は私のテーブルの幅を増加させます。誰でも私を助けてください。 例えば: これは私のテキストです - TD幅のようにうまく機能します。 しかし、挿入した場合は ThisISistyText ---...

76  ハイフンのような特殊文字の後に単語を破る方法( - )  ( How to break word after special character like hyphens ) 
比較的単純なCSS: <コード> div { width: 150px; } <コード> <div> 12333-2333-233-23339392-332332323 </div> 文字列が width に制約される...

142  定義されたフォントのどれがWebページで使用されていたかを検出する方法  ( How to detect which one of the defined font was used in a web page ) 
私のページに次のCSSルールがあるとします。 <コード> body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ユーザーのブラウザで定義されたフォントの1つを使用...

303  Internet Explorer 7の絶対に配置された親のパーセント幅の子要素の幅が崩壊したのはなぜですか。  ( Why did the width collapse in the percentage width child element in an absolutel ) 
私は、いくつかの子供を含む絶対に配置された div があり、そのうちの1つは比較的配置された div です。子<コード> Form1 で Form0 を使用すると、IE7の Form2 に折りたたみますが、FirefoxまたはSafariではなく。 For...

0  リスト項目でディスクを取り除く  ( Getting rid of disc in list item ) 
jQueryを使用してサイトを開発し、jQuery UIタブを作成しています。何らかの理由で、私のタブ(順序付けられていないリスト)は、OS XのFirefox 3を除くすべてのブラウザ(これまでにテスト済み)に弾丸を表示しています.Safari OS X、...

0  LazyWeb:要素の訪問されたクラスに基づいてLI要素を削除するJavaScriptが必要  ( Lazyweb need javascript that removes li elements based on visited class of a el ) 
すでにクリックしたように、必要なデータがたくさんあるこのページを持っていますが、頻繁に青色を探す必要があるので、頻繁に繰り返されます。私はこれがより効率的かもしれないことに気づいて、それが含まれているリンクが訪問されたかどうかに基づいて要素を隠されたように設定...

8  GeckoベースのブラウザのCSSテーブルセルの境界線を消す  ( Disappearing css table cell borders in gecko based browsers ) 
私はヤモリのバグを明らかにするように思われる非常に具体的なHTMLテーブルの構築物を持っています。 これは問題の蒸留版です。 Geckoベースのブラウザ(たとえば、FFなど)の次の表を守ってください。(これをコピーして新しいファイルに貼り付ける必要があります)...

5  CSSのテーブルを垂直方向に揃える方法  ( How to vertically align a table in css ) 
画面の途中でテーブルをCSS?に垂直に揃える方法 ...

0  背景イメージFirefox3のぼかし  ( Background image blurs in firefox3 ) 
Backgroundプロパティを使用してHTMLページで画像を使用すると、IEではLOKS FYNSがFirefoxでぼやけます。ワットは可能な解決策かもしれません。 ありがとう、 ...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有