-3

私は一種のスクリプトに取り組んでおり、jquery を使用してスクリプトを改善しようとしています。そのため、いくつかのコードを追加しました。ただし、このスクリプトは正常に実行されません。例えば、

<button class="yapistir"><div class="durum">Sabit</div>
<button class="yapistir"><div class="durum">Sabit Değil</div>
<button class="yapistir"><div class="durum">Sabit ama tam değil</div>
<button class="yapistir"><div class="durum">Sabit görünümlü fakat değil</div>
<button class="yapistir"><div class="durum">Sabit etc.</div>

ボタンをクリックすると、すべてのデュラム クラスが変更されます

私のコードは以下のとおりです。この状況で何ができますか。キング よろしく。

<script type="text/javascript">
$(document).ready(function() {

   $('.yapistir').click(function()
   {

          $('.durum').text("NewText");

   });
});
</script>

最初のボタンをクリックすると、次のようになります。

<button class="yapistir"><div class="durum">NewText</div>
<button class="yapistir"><div class="durum">NewText</div>
<button class="yapistir"><div class="durum">NewText</div>
<button class="yapistir"><div class="durum">NewText</div>
<button class="yapistir"><div class="durum">NewText</div>
4

4 に答える 4

3

.durumclicked の横にある特定の要素のみをターゲットにする必要があります.yapistir。

デモ

$(document).ready(function() {

   $('.yapistir').click(function()
   {

          $(this).next('.durum').text("NewText");

   });
});

ボタンタグを閉じることを忘れないでください。

于 2013-07-01T08:12:47.073 に答える
1

次のスクリプトを使用できます。

HTML:

<button class="yapistir"><div class="durum">Sabit</div></button>
<button class="yapistir"><div class="durum">Sabit Değil</div></button>
<button class="yapistir"><div class="durum">Sabit ama tam değil</div></button>
<button class="yapistir"><div class="durum">Sabit görünümlü fakat değil</div></button>
<button class="yapistir"><div class="durum">Sabit etc.</div></button>

ジャバスクリプト:

$(document).ready(function() {
    $('.yapistir').click(function() {
        $('.durum', $(this)).text("NewText");
    });
});

実際にクリックされたボタンに含まれる$(this)クラスで div を変更することを示しています。durum

次の HTML を使用すると、次のように取得できます。

<button class="yapistir">a</button><div class="durum">Sabit</div>
<button class="yapistir">b</button><div class="durum">Sabit Değil</div>
<button class="yapistir">c</button><div class="durum">Sabit ama tam değil</div>
<button class="yapistir">d</button><div class="durum">Sabit görünümlü fakat değil</div>
<button class="yapistir">e</button><div class="durum">Sabit etc.</div>

ジャバスクリプト:

$(document).ready(function() {
    $('.yapistir').click(function() {
        $(this).next().text("NewText");
    });
});
于 2013-07-01T08:14:51.933 に答える
1

編集：質問が変更されたので：

$(this).next('div.durum').text('NewText');

this検索.durumが現在の要素に限定されることを意味するコンテキストとして渡します。

$('.durum', this).text("NewText");

于 2013-07-01T08:13:51.700 に答える
0

あなたはこれを行うことができます：

$(document).ready(function () {
    $('.yapistir').click(function () {
        $(this).next('.durum').text("NewText");
    });
});

フィドルのデモ

于 2013-07-01T08:24:36.093 に答える