我正在为我的项目使用两个jQuery插件。
在我的例子中,我有四张图片幻灯片,每张图片滑块我都为图片添加了评论部分。对于评论,我使用Jeditable
插件进行内联评论。
<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>
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"
});
现在的问题是,当点击提交按钮时,我无法在ajax上使用textbox
传递editable
值。我在每张无效的幻灯片上获得第一个幻灯片文本框值。
submitdata: {
projectidx: $("#dino-example .inv").val()
},
没有上$("#dino-example .inv").val()
文本框值,如果我在第二张幻灯片上。
知道如何传递文本框值吗?
以下是我在JSFiddle上的示例代码:http://jsfiddle.net/f43waf7j/3/
感谢。
答案 0 :(得分:2)
通过以下代码段替换submitdata
:
$(".editable_textarea").editable("http://www.appelsiini.net/projects/jeditable/php/save.php", {
// ...
submitdata: function(){
return { projectidx: $(".inv").eq(currentIndex).val() };
},
// ....
}
答案 1 :(得分:0)
我看到的一个问题是你如何抓住.inv
输入的值。当你打电话:
$("#dino-example .inv").val()
jQuery正在选择页面上的所有4个输入元素,因为页面上有4个与$("#dino-example .inv")
选择器匹配的输入元素。您可以通过在控制台中运行$("#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()
将返回第一个匹配元素的值,该元素是页面上的第一个输入元素。
要获取第2,第3或第4个输入元素的值,您需要使用.eq()
(docs)之类的内容。将.eq(1)
链接到选择器将从匹配元素集中选择第二个元素。同样,.eq(2)
到您的选择器将从匹配元素集
例如。从第二张幻灯片中获取输入值:
$("#dino-example .inv").eq(1).val()
现在,在您的情况下,您想要获取与当前幻灯片对应的输入值。也就是说,当用户在第1张,第2张,第3张和第4张幻灯片上单击“确定”时,您希望获取与该幻灯片关联的.inv
输入的值。
为此,您可以将多个选择器与this
选择器链接在一起,以根据当前幻灯片获取每个值。
$(this).next('p').children('.inv').val()
对于每张幻灯片,$(this)
引用editable
元素。链接.next('p').children('.inv')
会在同一幻灯片中选择.inv
输入。
这是your JSFiddle with an alert displaying the correct input value。