jQuery 正确的文本框值未获取提交数据

Question

我正在为我的项目使用两个 jQuery 插件。

在我的示例中，我有四张图片幻灯片，我为每个图片滑块都添加了图片评论部分。对于评论，我使用了 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"
});

现在的问题是，单击提交按钮时，我无法将 textbox 值传递给 ajax 上的 editable。我在每张无效的幻灯片上都得到第一张幻灯片文本框值。

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

没有得到 $("#dino-example .inv").val() 文本框值，如果我在第二张幻灯片上。

知道如何传递文本框值吗？

这是我在 JSFiddle 上的示例代码：http://jsfiddle.net/f43waf7j/3/

谢谢。

Answer 1

我看到的一个问题是您如何获取 .inv 输入的值。当你打电话时：

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

jQuery 正在 select 页面上的所有 4 个输入元素，因为页面上有 4 个输入元素匹配 $("#dino-example .inv") selector。您可以在您的控制台中通过运行 $("#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">]

在 select 或 returns 上调用 .val() 第一个匹配元素的值，即页面上的第一个输入元素。

要获取第二个、第三个或第四个输入元素的值，您需要使用类似 .eq() (docs) 的方法。将 .eq(1) 链接到您的 select 或 select 匹配元素集中的第二个元素。同样，.eq(2) 到您的 select 或 select 匹配元素集中的第二个元素

例如。要从第二张幻灯片中获取输入值，请使用：

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

现在，在您的情况下，您想要获取与当前幻灯片对应的输入值。也就是说，当用户在第一、第二、第三和第四张幻灯片上单击“确定”时，您想要获取与该幻灯片关联的 .inv 输入的值。

为此，您可以将多个 selector 与 this selector 链接在一起，以根据当前幻灯片获取每个值。

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

对于每张幻灯片，$(this) 引用 editable 元素。在同一张幻灯片上链接 .next('p').children('.inv') selects .inv 输入。

这里是your JSFiddle with an alert displaying the correct input value。

Answer 2

用这个片段替换submitdata：

$(".editable_textarea").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", {
  // ...
  submitdata: function(){ 
     return { projectidx: $(".inv").eq(currentIndex).val() };
  },
  // ....
}

jQuery 正确的文本框值未获取提交数据

jQuery right textbox value are not getting on submitdata

javascript

jquery

html

jeditable

owl-carousel-2

这是我的 HTML 部分：

jQuery 部分：