2

プロジェクトに 2 つの jQuery プラグインを使用しています。

  1. フクロウの回転木馬
  2. ジェディタブル

私の例では、4 つの画像スライドがあり、すべての画像スライダーに画像のコメント セクションを追加しました。Jeditableコメントについては、インライン コメント用のプラグインを使用しました。

これが私のHTML部分です：

<div id="dino-example" class="dino-carousel">
    <div class="item">
        <div>
            <h1>
       Slide 1
      </h1>
            <p>
                Ut laborum. Nisi ipsum natus laborum ea nemo distinctio. Laborum aspernatur sed sit, et quod illum.
            </p>
            <p class="editable_textarea" id="paragraph_1">click here to edit text content</p>
            <p>
                <input type="text" class="inv" value="1">
            </p>
        </div>

    </div>
    <div class="item">
        <h1>
      Slide 2
      </h1>
        <p>
            Consequat. Recusandae. Lorem a iure alias officia aut officiis repellendus. Aliquid quasi ad voluptate modi non est veniam, quo.
        </p>
        <p class="editable_textarea" id="paragraph_1">click here to edit text content</p>
        <p>
            <input type="text" class="inv" value="2">
        </p>
    </div>
    <div class="item">
        <h1>
      Slide 3
      </h1>
        <p>
            Tempore, consequuntur est occaecat doloribus qui dignissimos voluptatem eius voluptatem ea iusto.
        </p>
        <p class="editable_textarea" id="paragraph_1">click here to edit text content</p>
        <p>
            <input type="text" class="inv" value="3">
        </p>
    </div>
    <div class="item">
        <h1>
      Slide 4
      </h1>
        <p>
            Sit dolor ut culpa, deserunt placeat, deleniti minus ut magna fugit, rerum aliquid est magni aliqua. Qui unde.
        </p>
        <p class="editable_textarea" id="paragraph_1">click here to edit text content</p>
        <p>
            <input type="text" class="inv" value="4">
        </p>
    </div>
</div>

<div>

</div>

jQuery 部分:

var currentIndex = 0;
$(document).ready(function() {
    $("#dino-example").owlCarousel({
        items: 5,
        singleItem: true,
        afterMove: function() {
            currentIndex = this.currentItem;
        }
    });
});

$(".editable_textarea").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", {
    indicator: "",
    type: 'textarea',
    submitdata: {
        projectidx: $("#dino-example .inv").val()
    },
    select: true,
    submit: 'OK',
    cancel: 'cancel',
    cssclass: "editable"
});

今の問題は、送信ボタンがクリックされたときに ajaxtextboxで値を渡すことができないことです。editable無効なすべてのスライドで最初のスライド テキスト ボックスの値を取得しています。

submitdata: {
    projectidx: $("#dino-example .inv").val()
},

$("#dino-example .inv").val()2番目のスライドにいる場合、テキストボックスの値を取得できません。

テキストボックスの値を渡す方法はありますか?

JSFiddle のサンプル コードは次のとおりです: http://jsfiddle.net/f43waf7j/3/

ありがとう。

4

2 に答える 2

2

submitdataこのスニペットに置き換えます:

$(".editable_textarea").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", {
  // ...
  submitdata: function(){ 
     return { projectidx: $(".inv").eq(currentIndex).val() };
  },
  // ....
}
于 2016-01-23T10:25:15.013 に答える
0

.inv私が見る 1 つの問題は、入力の値を取得する方法です。電話すると:

$("#dino-example .inv").val()

$("#dino-example .inv")ページにはセレクターに一致する 4 つの入力要素があるため、jQuery はページ上の 4 つの入力要素すべてを選択しています。$("#dino-example .inv")コンソールで実行すると、これを実際に確認できます。

> $("#dino-example .inv")
< [<input type=​"text" class=​"inv" value=​"1">​, <input type=​"text" class=​"inv" value=​"2">​, <input type=​"text" class=​"inv" value=​"3">​, <input type=​"text" class=​"inv" value=​"4">​]

セレクターを呼び出す.val()と、最初に一致した要素 (ページの最初の入力要素) の値が返されます。

.eq()2 番目、3 番目、または 4 番目の入力要素の値を取得するには、 ( docs )のようなものを使用する必要があります。セレクターにチェーン.eq(1)すると、一致した要素のセットから 2 番目の要素が選択されます。同様に.eq(2)、セレクターは、一致した要素のセットから 2 番目の要素を選択します

例えば。2 番目のスライドの使用から入力の値を取得するには:

$("#dino-example .inv").eq(1).val()

今、あなたの場合、現在のスライドに対応する入力の値を取得したいと考えています。つまり、ユーザーが 1 番目、2 番目、3 番目、4 番目のスライドで [OK] をクリックする.invと、そのスライドに関連付けられた入力の値を取得します。

これを行うには、複数のセレクターをセレクターと一緒にチェーンしthisて、現在のスライドに基づいて各値を取得できます。

$(this).next('p').children('.inv').val()

各スライド$(this)の要素を参照しeditableます。連鎖は、同じスライド.next('p').children('.inv')の入力を選択します。.inv

これは、正しい入力値を表示するアラートを含む JSFiddleです。

于 2016-01-23T10:12:06.070 に答える