-1

アプリケーションを開いたら、「質問の追加」を2回クリックして、2つのテーブル行を追加してください。

これで、アプリケーションで、水平線の上にテキストエリアとプラスボタンがあり、水平線の下に2つのテーブル行が表示され、両方の行に独自のテキストエリアとプラスボタンが表示されます。

今私の質問は、これら2つの結果を実現させたいということですが、この状況を解決するには、Jquery/Javascriptの使用に長けている誰かの助けが必要です。

状況1.ユーザーが水平線の上にあるプラスボタンをクリックすると、検索バーを含むモーダルウィンドウが表示されます。検索バー「AAA」と入力してください。結果のリストが表示されます。ここで必要なのは、ユーザーが[追加]ボタンをクリックして行を選択した場合、その行内の「QuestionContnet」を水平線の上のテキスト領域に表示することです。現時点では、[追加]ボタンはモーダルウィンドウを閉じるだけですが、テキストエリアには何も追加しません。

状況2：これは、ユーザーが水平線の下のテーブル行の1つにあるプラスボタンをクリックすることを処理します。追加された「QuestionContent」が、ユーザーがプラスボタンをクリックしたのと同じ行内のテキストエリアに表示されることを除いて、同じことを実行したいと思います。

どちらのプラスボタンがクリックされたかに応じて、QuestionContentを正しいテキスト領域に追加するために、両方の状況をどのように解決できますか？モーダルウィンドウ内にコンテンツを表示するためにIframeを使用しています。

アップデート：

アプリケーションを見ると、「追加」ボタンをクリックすると、textaeaに「[Object][object]」と表示されます。「質問」ではありません。

Below is the code for the application:



        <head>

               <script type="text/javascript">

    var plusbutton_clicked;

 function insertQuestion(form) {


var $tbody = $('#qandatbl > tbody'); 
var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
var $plusrow = $("<td class='plusrow'></td>");
var $question = $("<td class='question'></td>");


 $('.questionTextArea').each( function() {

 var $this = $(this);
var $questionText = $("<textarea class='textAreaQuestion'></textarea>").attr('name',$this.attr('name')+"[]")
.attr('value',$this.val());

 $question.append($questionText);

});

 $('.plusimage').each( function() {

var $this = $(this);
var $plusimagerow = $("<a onclick='return plusbutton();'><img src='Images/plussign.jpg' width='30' height='30' alt='Look Up Previous Question' class='imageplus'/></a>").attr('name',$this.attr('name')+"[]")
.attr('value',$this.val());

$plusrow.append($plusimagerow);

 });

$tr.append($plusrow);
$tr.append($question);
$tbody.append($tr); 

form.questionText.value = "";

$('.questionTextArea').val('');

}

function plusbutton() { 
        // Display an external page using an iframe 
        var src = "previousquestions.php"; 
        $.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');
        return false;
    } 


    function closewindow() {     

        $.modal.close(); 
        return false;
    } 

    $('.plusimage').live('click', function() {
        plusbutton($(this));
    });


    function plusbutton(plus_id) {
        // Set global info
        plusbutton_clicked = plus_id;
        // Display an external page using an iframe
        var src = "previousquestions.php";
        $.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');
        return false;
    }


    function addwindow(questionText) { 

        if(window.console) console.log();
            var txt = $(this).val(questionText);

        if($(plusbutton_clicked).attr('id')=='mainPlusbutton') { 
            $('#mainTextarea').val(txt);
            } else { 
                $(plusbutton_clicked).parent('td').next('td.question').find('textarea.textAreaQuestion').val(txt); 
                }

        $.modal.close(); 
        return false;
    } 





</script>

</head>

<body>

<form id="QandA" action="<?php echo htmlentities($action); ?>" method="post">

<div id="detailsBlock">
<table id="question">
<tr>
<td rowspan="3">Question:</td> 
<td rowspan="3">
                        <textarea class="questionTextArea" id="mainTextarea" rows="5" cols="40" name="questionText"></textarea>
                    </td>
                </tr>
                </table>

                <table id="plus" align="center">
                <tr>
                <th>
                <a onclick="return plusbutton();">
                <img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage" id="mainPlusbutton" name="plusbuttonrow"/>
                </a>
                <span id="plussignmsg">(Click Plus Sign to look <br/> up Previous Questions)</span>
                </th>
                </tr>
                </table>

                <table id="questionBtn" align="center">
                <tr>
                <th>
                <input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" />
                </th>
                </tr>
                </table>

                </div>
                <hr/>

                <div id="details">
                <table id="qandatbl" align="center">
                <thead>
                <tr>
                    <th class="plusrow"></th>
                    <th class="question">Question</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
                </table>
                </div>

                </form>

                </body>

モーダルウィンドウに保存される詳細は、「previousquestions.php」と呼ばれる別のスクリプトから取得されます。以下は、「QuestionContent」フィールドの結果のみが表示され、ユーザーが検索をコンパイルした後の「追加」ボタンを表示するコードです。 ：

<?php

$output = "";

        while ($questionrow = mysql_fetch_assoc($questionresult)) {
$output .= "
<table>
      <tr>
      <td class='addtd'><button type='button' class='add' onclick='parent.addwindow();'>Add</button></td>
      </tr>";
        }
        $output .= "        </table>";

        echo $output;

        ?>

ありがとうございました

こちらの申し込み

4

3 に答える 3

3

最初の問題はこれです - >

<button id="add">

ID を何度も再利用することはできません。そうしないと、ページがその ID を持つ最後の要素まで反復され、以前の要素に対して何も実行されなくなります。

クイックフィックス:

<button class="add">

十分に単純です。

最初の列から質問テキストを取得する必要があります。jQuery セレクターを使用してこれを行うには、非常に多くの方法があります。

状況 1

1 つのオプションを見てみましょう->

$(document).on('click', '.add', function(){
  //now that we've declared the click function, let's jump up to our parent element, and grab the text in the first cell.
  var theQuestion = $("td:first-child", $(this).parent()).text();
  //Now that we've figured out how to traverse the DOM to get the data we want, we need to move that data elsewhere. 
  $('.questionTextArea').val(firstCell);
});

簡単ですよね？これで、最初に抱えていた問題が解決するはずです。 注: テキストエリアvalueはデータの設定に使用されますが、他の要素は .text() を使用します。

状況 2

よし、ここで、クリックしたときに「+」行に一意の識別子を追加する方法を理解する必要があり、データを追加するときにその「一意の識別子」を確認する必要があります。

<td>plusrow のクラスを持つ があります。いいですね。それからクリック機能を作成し、新しいリファレンスclassを作成してみましょう。

 $(document).on('click', '.plusrow', function(){
   //adding a unique class for the purpose of the click.
   $(this).addClass('activePlusRow');
 });

これで、クリックした "+" に新しいクラス --activePlusRowが追加されました。追加ボタンの最初のクリック ハンドラーに戻り、いくつかの新しい条件ステートメントを指定します。

$(document).on('click', '.add', function(){
  //lets get our Question Text...
  var theQuestion = $("td:first-child", $(this).parent()).text();

  //the row is present, let's then make sure that the proper cell gets your data.
  if($('.activePlusRow').length > 0){

    $('.activePlusRow').next('.textAreaQuestion').val(theQuestion);
    $('.activePlusRow').removeClass('activePlusRow');
  }
});

上記からわかるように、activePlusRow クラスが存在するかどうかをテストし、存在する場合は、次のクラスに繰り返し、textarea with a class of textAreaQuestionその値を次のように変更します。theQuestion from the .add button we clicked.

ご不明な点がございましたら、お知らせください。

于 2012-05-26T03:54:19.140 に答える
2

plusbutton選択した質問を指定したtextareaにターゲティングする最善の方法は、関数をパラメーター化することだと思います。

function plusbutton(plus_id) {
    // Set global info
    plusbutton_clicked = plus_id;
    // Display an external page using an iframe 
    var src = "previousquestions.php"; 
    $.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');
    return false;
}

もちろん、他の関数がこの情報を変更/使用できるように、関数のvar plusbutton_clicked;前にグローバルを宣言する必要があります。insertQuestionプラスボタンごとに一意のパラメータを使用してこの関数を呼び出す必要があります（動的に生成するため、これはどのように実行するかはあなた次第です）

次に$(document).on('click', '.add', function(){});、ユーザーが[追加]ボタンをクリックすると、プラスボタンIDが表示されるので、jQueryを使用して対応するテキスト領域に移動し、そこにテキストを配置できます。

于 2012-05-31T21:29:27.980 に答える
0

next() は、直後の兄弟のみを検索するため、適切な関数ではないと考えています...これを試してください：

    $(document).on('click', '.add', function(){  

    console.log("clicked");

   //lets get our Question Text... 
  var theQuestion = $("td:first-child", $(this).parent()).text(); 

  //the row is present, let's then make sure that the proper cell gets oru data. 
  if($('.activePlusRow').length > 0){ 

    $('.activePlusRow').next('.question').find('textarea.textAreaQuestion').val(theQuestion); 
    $('.activePlusRow').removeClass('activePlusRow'); 
  }

   $.modal.close(); 
   return true;

});
于 2012-05-31T16:12:20.197 に答える