Question

在我的网站上，我有一个输入文本字段，用户可以在其中输入关键字，旁边有一个提交按钮，用于提交输入的关键字。

<input type="text" name="keyword" id="keyword">
<input type="submit" id="analyse" value="Analyse">

在此输入下方，我还向用户提供了260个关键字建议的列表，他们可以选择这些建议，因为他们不想自己输入任何关键字。该列表采用提交按钮的形式。

<input type="submit" id="keyword1" value="Example Keyword 1">
<input type="submit" id="keyword2" value="Example Keyword 2">
<input type="submit" id="keyword3" value="Example Keyword 3">
<input type="submit" id="keyword4" value="Example Keyword 4">
[...]
<input type="submit" id="keyword259" value="Example Keyword 259">
<input type="submit" id="keyword260" value="Example Keyword 260">

我的目标是，如果点击260个关键字建议中的一个，它会将该值复制到顶部关键字输入字段，并自动触发主提交按钮。

我想不出任何有效的解决方案，因为每个人都有不同的ID。我能想到的是，创建260个不同的jquery代码来解决每个ID。

$("#keyword1").val($("#keyword").val());
$("#keyword2").val($("#keyword").val());
$("#keyword3").val($("#keyword").val());
[...]
$("#keyword260").val($("#keyword").val());

必须有一种更有效的方式。

Answer 1

使用循环：Loop

for(var i=1; i<=260 ;i++){
    $("#keyword"+i).val($("#keyword").val());
}

Answer 2

改变你的

<input type="submit" id="keyword1" value="Example Keyword 1">

到

    <input type="button" class="keywordSuggestion" value="Example Keyword 1">
    <input type="button" class="keywordSuggestion" value="Example Keyword 2">
    <input type="button" class="keywordSuggestion" value="Example Keyword 3">
....
    <input type="button" class="keywordSuggestion" value="Example Keyword 260">

Jquery的：

$('.keywordSuggestion').click(function(){ $('#keyword').val($(this).val());});

Answer 3

<强>的JavaScript

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

    <script src="script.js"></script>
    <script type="text/javascript">
      $(function(){
          $('.examples input').click(function(e){
            $('#keyword').val($(this).val());
            $('#analyse').click();
          });
        });
    </script>
  </head>

  <body>
    <form>
      <input type="text" name="keyword" id="keyword">
      <input type="submit" id="analyse" value="Analyse">

    </form>
    <div class="examples">
      <input type="submit" id="keyword1" value="Example Keyword 1">
      <input type="submit" id="keyword2" value="Example Keyword 2">
      <input type="submit" id="keyword3" value="Example Keyword 3">
      <input type="submit" id="keyword4" value="Example Keyword 4">
      <input type="submit" id="keyword259" value="Example Keyword 259">
      <input type="submit" id="keyword260" value="Example Keyword 260">
    </div>
  </body>

</html>

<强>描述

//On Document.Ready
$(function(){
    //Bind to when in the class examples an input is clicked
    $('.examples input').click(function(e){
        //Set the value of the element with id keyword to the element that was clicked value
        $('#keyword').val($(this).val());
        //Click the element with id analyse
        $('#analyse').click();
    });
});

我们将您的所有示例组织成一个div，其类为examples，这允许我们执行上述jQuery选择器。

<div class="examples">
    <input type="submit" id="keyword1" value="Example Keyword 1">
    <input type="submit" id="keyword2" value="Example Keyword 2">
    <input type="submit" id="keyword3" value="Example Keyword 3">
    <input type="submit" id="keyword4" value="Example Keyword 4">
    <input type="submit" id="keyword259" value="Example Keyword 259">
    <input type="submit" id="keyword260" value="Example Keyword 260">
</div>

jquery复制提交值到文本输入

3 个答案: