0

これは、私が現在取り組んでいる Web ページのソース コードを大幅に削除したものです。

<!--// GRID ENTRY //-->
    <li class="entry" id="sjDDulC8wt">
        <div class="entry_actions">
            <ul class="entry_actions">
                <li class='have_it'>
<a href='javascript: haveItem("name", "id", "none")'  target='_self' title='Have It' class='have_it'>%</a></li>
            </ul>
        </div>
    </li>

haveItem()関数内で、<a>要素のクラスを「have_it」から「have_it selected」に変更して、要素の外観を変更しようとしています。id の理由は、ページにこれらの要素が多数あるためです。私が現在使用しているJavaScriptは次のとおりです。

var targetA = document.getElementbyID(sjDDulC8wt).getElementsbyTitle("Have_it"); 
targetA.removeClass("have_it").addClass("have_it selected");

リンクをクリックするとhaveItem()関数が実行されますが、クラスは変更されません。リンクをクリックするとクラスが変更されるようにスクリプトを変更するにはどうすればよいですか?

4

5 に答える 5

4

と を使用しているため、jQuery を使用していると想定していremoveClass()ますaddClass。それ以外の場合は、以下のコードが機能するようにjQueryにリンクするか、JavaScript のみを使用することをお勧めします。

var targetA = $('#sjDDulC8wt .have_it');
targetA.addClass('selected');

今後の参考のために、改善できるコードのいくつかを次に示します。

  1. getElementById()取得する要素の ID を文字列として受け入れます。'基本的に、ID をまたはでラップする必要があります。"
  2. スペースとアンダースコアを入れる場所に注意してください。それらは同じものではありません。あなたのリスト項目には titleHave Itがありますが、JavaScript には がありますHave_it。
  3. 大文字小文字が重要です。Have_Itと同じではありませんHave_it。ID で要素を取得しようとするときは、これに注意してください。
  4. スペースを含むクラスは、実際には複数のクラスです。have_it selected実際にはhave_itクラスとクラスの両方がありselectedます。したがって、削除have_itしてから追加する必要はありません。クラスhave_it selectedの追加に直接進むことができます。selected
  5. 関数getElementbyTitle()は現在 JavaScript に存在しません。また、大文字の使用にも注意してください。通常、関数内のすべての単語の最初の文字は大文字になります。したがって、存在する場合は呼び出されます( の代わりに にgetElementByTitle()注意してください)。Bb
于 2012-06-27T21:27:58.247 に答える
1

ここ：

var anchor = document.querySelector( '#sjDDulC8wt [title="Have It"]' );
if ( anchor ) anchor.classList.add( 'selected' );

ライブデモ： http： //jsfiddle.net/UZfnh/

（古いブラウザでは動作しません。）

于 2012-06-27T21:42:09.237 に答える
0

要素が正常に見つかったら、次のいずれかを実行できます。

  1. element.classList.add("selected");

    classListFF 3.6、IE 10、Chrome 8、Opera 11.50、Safari5.1以降で利用できるかなり新しい機能を使用しています。これは、クライアントがこれらのブラウザーの1つを使用することが確実になったら（近い将来）、これを行うための最も好ましい方法です。

  2. element.className += " selected";

    classNamedoc。これは機能し、おそらく最も簡単な方法です。物事ほど良くはありませんclassListが、すべてのブラウザで利用できます。

于 2012-06-27T21:42:45.597 に答える
0

これでタスクが実行されます。

<a title="Have It" class="have_it" onclick="this.className+=' selected'">%</a>

ただし、DOMについて学ぶ必要があります。使用した方法 ( getElementbyID、getElementsbyTitle、removeClassおよびaddClass) は存在しません。

于 2012-06-27T21:33:48.593 に答える
0

jQuery を使用できない場合は、次を使用して要素のクラス名を変更できますclassName。

var element = document.getElementById("elementId");
element.className = "have_it selected";

この関数にも注意してください: getElementsByClassName(HTML5)。

指摘されているように、要素の選択には他にもいくつかの問題があります。あなたの例から、あなたが使いたいように見えます：

var element = document.getElementById("sjDDulC8wt");
var children = element.getElementsByClassName("have_it");
children[0].className = "have_it selected";

ここにはエラー処理/null チェックがないことに注意してください。そして、これは、指定されたクラスを持つ最初の子のみを変更するという単純なケースを処理します (存在すると仮定)。

ただし、使用できる場合はjQueryをお勧めします。これを使用addClass/removeClassすると、すでに jQuery を期待しているように見えます。

于 2012-06-27T21:30:33.297 に答える