Question

我写了这段代码，更改以前的文本框值，但它不起作用，通过单击确定按钮我想更改Text1 text.its只是一个示例来显示问题，我无法访问该文本框的ID！所以在代码中我去，直到使用class = stop访问div并更改文本框值

<div style="width:500px;" class="siblings">
    <div class="stop" > </div>
    <input  id="Text1" type="text" /> <br>
    <--!  more elements will be  here  !-->
    <input  type="Button" value="ok" onclick='$(this).parent().prevUntil("div.stop").val("new text");'/>                                                                    
</div>

Answer 1

像这样调用jQuery函数的方法是将它放在像这样的javascript函数中：

HTML

<input  type="Button" value="ok" onclick='myFunction(this)'/>

使用Javascript / Jquery的

function myFunction(that){
    $(this).parent().find('input[type="text"]:first-child').val('new text');
}

大多数人使用jQuery和点击事件的方式都没有从HTML本身调用任何东西。它看起来像这样：

纯jQuery

$('input[type="button"]').click(function(){
    $(this).parent().find('input[type="text"]:first-child').val('new text');
});

访问<input id="Text1" type="text"/> -

如果#Text1是第一个输入元素，那么这是您应该能够使用的树遍历：

$(this).parent().find('input[type="text"]:first-child').val('new text');

Answer 2

让我们来看看你的剧本并将其分解。

$(this).parent().prevUntil("div.stop").val("new text");

$(this) - 选择button。

BUTTON.parent() - 现已选择<div style="width:500px;" class="siblings">

DIV.prevUntil("div.stop") - 在这里，您说“来自我们的SELECTED div，获取所有以前的SIBLINGS，直到我们看到DIV类为stop。

所以，如果您的DOM树看起来像这样：

DIV.nope
DIV.stop
DIV.go
DIV.siblings
    DIV.stop
    INPUT
    BUTTON

点击按钮会选择.siblings，然后在我们的标记中选择包含.go个类的所有DIV（但不是.stop或.nope）再次，这是因为.prevUntil只会选择.siblings的所有兄弟姐妹，直到选择器匹配。

此时，如果你有一个元素，你会尝试将value属性设置为“新文本”（但由于我们选择的元素是DIV，这可能不是你的想...）

你真正想做的是这样的事情：

当用户点击button时，请转到parent和button的常见input，然后选择输入并更改value

$(this).parent().find('input[type=text]').val('new text')

.parent（）选择公共父级，.find()选择输入，然后val更新值。

但是，如果您有多个输入，并希望使用div.stop作为输入的支点，该怎么办？（你知道，例如，div.stop将始终继续你的输入吗？你可以这样做：

$(this).parent().find('div.stop + input').val('new text');

这是一个演示的小提琴：http://jsfiddle.net/7Najs/

Answer 3

我不知道为什么需要停止＆＃34;停止＆＃34;如果您可以通过ID直接访问输入值。因此我会做以下事情：

<div style="width:500px;" class="siblings">
    <input id="Text1" type="text" /> <br>
    <!--  more elements will be  here  -->
    <input type="Button" value="ok" onclick="$('#Text1').val('new text');" />
</div>

此外，HTML评论有点偏，也更新了。

Answer 4

我不太明白你说你无法访问文本框ID的原因。下面是一个快速示例，介绍如何使用4个按钮修改文本输入，每个按钮具有不同的值。

 <div style="width:500px;" class="siblings">
    <input id="Text1" type="text" /> <br>
     <!--  more elements will be  here  -->
   <input type="Button" value="ok" onclick="$('#Text1').val('new text');" />
   <input type="Button" value="ok" onclick="$('#Text1').val('other text');" />
   <input type="Button" value="ok" onclick="$('#Text1').val('another text');" />
   <input type="Button" value="ok" onclick="$('#Text1').val('next text');" />
</div>

这是一个JSBin：http://jsbin.com/zufesici/1/edit

无法使用onclick事件调用jquery函数

4 个答案:

HTML

使用Javascript / Jquery的

纯jQuery