我正在为我的项目使用两个jQuery插件。
Owl Carusel
Jeditable
在我的示例中,我有四个图像幻灯片,每个图像滑块都为图像添加了注释部分。对于注释,我使用了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"
});

现在的问题是,当单击submit按钮时,我无法在ajax上使用textbox传递editable值。我将在每个无效幻灯片上获取第一个幻灯片文本框值。
submitdata: {
    projectidx: $("#dino-example .inv").val()
},

如果我在第二张幻灯片上,则不会显示文本框值。
知道如何传递文本框值吗?
下面是我在JSFiddle上的示例代码:http://jsfiddle.net/f43waf7j/3/
谢谢。

最佳答案

用以下代码段替换submitdata

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

08-17 13:56