文字列配列の要素をボタンクリックで個別に表示する

Question

サーバー側からテキストを取得していますが、各ボタンをクリックするたびに1つの単語を表示します。ここに私のアプローチがあります：

単語を表示する私の機能です。私は何をしようとしているのかを説明するだけでは機能しません。

$(function() 
    {   
     $("#button").click(function(){ 
      $("#container span").fadeIn(450); // shows nothing 
     }); 
    }); 

jqueryセレクタは、htmlではないため、スパンを選択できません。私に解決策を教えてもらえますか？

（私は$（ "＃コンテナ"）を書いたフェードイン（450）;それはすべての単語を示しています。。）

Answer 1

コードには2つの問題があります。

を使用してspan要素を#containerに追加しましたが、#container jQueryオブジェクトを返します。したがって、span要素を追加するたびに、の場合は.hide()となります。ご覧のとおり、少し変更しました。 span要素を作成して非表示にしてから#containerに追加する必要があります。

$("<span>"+words[i]+" </span>").hide().appendTo("#container"); 

第2の問題は、.click()の機能にあります。セレクタはすべてのスパン要素を選択します。隠れ要素や最初の要素などを選択する擬似セレクタがあります。これらを一緒に使用すると、このような最初の隠れ要素を選択できます。

$('#container span:hidden:first'); 

最後にこれらをコードに実装すると、この結果が得られます。

$(document).ready(function() { 
    $.ajax({ 
     type: "GET", 
     dataType: 'json', 
     url: "request.php", 
     success: function(response) { 
      var words = text.match(/\b([a-z]{1,})\b/gi); //text is an element of json array 
      for (i = 0; i < 10; ++i) { 
       $("<span>"+words[i]+" </span>").hide().appendTo("#container"); 
      } 
     } 
    }); 
}); 

$(function() { 
    $("#button").click(function() { 
     $('#container span:hidden:first').fadeIn(450); 
    }); 
}); 

しかし、もちろん、あなたがfadeInには、コードのあなたの部分を使用することができ、一度にごspan要素のすべてをしたい場合は、

$("#container span").fadeIn(450); 

Hereはコード例です。

Answer 2

2 VARS宣言：保存し、AJAX呼び出した後

var arr = []; 
var inc = 0; 

をアレイのワード：次いで

for (i = 0; i < 10; ++i) 
         arr.push(words[i]); 
       } 

：

$("#button").click(function(){ 
    while (inc < arr.length) { 
     $("#container").html("<span>"+words[i]+"</span>"); 
      inc++; 
    }); 

私はこれをテストしなかった。お役に立てれば。ここで

Answer 3

はあなたのための1つのオプションがあります：

$('span').hide(); 
var i = 1; 

$("#button").click(function(){ 
    if (i <= $("#container > span").size()){ 
     $("#container span:nth-child("+i+")").fadeIn(450); // shows nothing 
     if (i < $("#container > span").size()){ 
      i++; 
     } 
     else { 
      $(this).attr("disabled", true) 
     } 
    }  
}); 

は、ここで例を参照してください - http://jsfiddle.net/xhMnt/2/

はそれがお役に立てば幸いです。 Alex

Answer 4

Alex's answerはスパンを1つずつ表示するためのかなりの方法です。 AJAXレスポンスからスパンを作成する方法は、PHPスクリプトが返すデータのタイプによって異なります。応答は次のようになります場合：

[ 
    "Some", 
    "words", 
    "via", 
    "JSON" 
] 

...それは非常に簡単です：一方

$.ajax({ 
    type: "GET", 
    dataType: 'json', 
    url: "request.php", 
    success: function(data, status) { 
     var container = $("#container"); 
     var word; 

     for (word in data) { 
      $('<span />').append(word).appendTo(container); 
     } 
    } 
}); 

応答は次のようになります場合は、「Some words as plaintext」、あなたは何をする必要があるだろうこのような何か：

$.ajax({ 
    type: "GET", 
    dataType: 'text', 
    url: "request.php", 
    success: function(data, status) { 
     var container = $("#container"); 

     var words = data.split(' '); 
     var word; 

     for (word in words) { 
      $('<span />').append(word).appendTo(container); 
     } 
    } 
}); 

私はtextにdataTypeを変更し、私は、変数wordsを追加、お知らせスペース文字の結果。

私はこれがあなたを助けてくれることを願っています。

Answer 5

これはそれを

$("#container span:eq(" + ($("#container span.active").removeClass("active").fadeOut().index()+1) + ")").addClass("active").fadeIn(); 

を行いますが、ここでのデモを参照してください。http://jsfiddle.net/diode/y7qdV/5/