Question

我希望能够使用class="downloadtext"元素span更改text的值。您可以看到我在下面写的方式，但是它会附加/更改所有spans文本的值 - 而不是一次只更改一个span标记文本。

任何帮助将不胜感激。感谢

$(function(){


     var eachspan = $('.download-table span');
     var eachtext = $('.download-table span').text();

    eachspan.each(function(i){


        $(this).click(function(){

            $('.downloadtext').val(eachtext);


        });
    });

});

HTML

<div id="download-file" class="dialog">

  <div class="dialog-head">
    Save as
  </div>

  <div class="dialog-content">

    <div class="file">
      <p>File name:</p>
      <input type="text" name="text" class="downloadtext">
    </div>
    <!-- eo // file name -->

    <div class="location">
      <p>Location:</p>
      <select>
        <option value="1">/</option>
        <option value="2">/home</option>
        <option value="3" selected="selected">/home/guest</option>
      </select>
      <span class="save-icon"><i class="fa fa-floppy-o"></i></span>

    </div>
    <!-- eo // location -->

    <div class="list-files">

      <table>
        <thead>
          <tr>

            <td>Name</td>
            <td>Type</td>
            <td>Date Modified</td>

          </tr>

        </thead>

        <tbody class="download-table">
          <tr>
            <td><i class="fa fa-file"></i> <span>Budget by Region - Area Chart</span></td>
            <td>File</td>
            <td>2013 Nov 18 17:50:13</td>

          </tr>
          <tr>
            <td><i class="fa fa-file"></i> <span>Budget to Actual Comparison by Region - Scatter Plot</span></td>
            <td>File</td>
            <td>2013 Nov 18 17:50:13</td>

          </tr>
          <tr>
            <td><i class="fa fa-file"></i> <span>Sales by Country - Data Bar</span></td>
            <td>File</td>
            <td>2013 Nov 18 17:50:13</td>

          </tr>
          <tr>
            <td><i class="fa fa-file"></i> <span>Top 20 Countries by Quantities - Bar Chart</span></td>
            <td>File</td>
            <td>2013 Nov 18 17:50:13</td>

          </tr>

          <tr>
            <td><i class="fa fa-file"></i> <span>Top 5 Department Spend - Pie Chart</span></td>
            <td>File</td>
            <td>2013 Nov 18 17:50:13</td>

          </tr>

        </tbody>


      </table>



    </div>
    <!-- eo // list-files -->




    <div class="buttons">

      <a href="#" class="primary button left">Save</a> <a href="#" class="primary button right colorbox-close" data-value="true">Cancel</a>

    </div>
  </div>
  <!-- eo // dialog-content -->

</div>
<!-- eo //  dialog-content -->

Answer 1

获取该特定元素的click事件中的span文本。

$(function(){
     var eachspan = $('.download-table span');

     eachspan.click(function(){
         var spanText = $(this).text();
         $('.downloadtext').val(spanText);
     });    
});

Updated fiddle

Answer 2

$(function() {
  $('.download-table tr').each(function(i) {
    var $this = $(this)
    $this.click(function() {
      $('.downloadtext').val( $this.find('span').text() );
    });
  });
});

我会将事件附加到该行。这样用户可以点击行中的任何位置。基于单击的行，您可以找到跨度并使用类downloadtext填充输入。

http://jsfiddle.net/SeanWessell/9n9ywmxa/

更改每次点击jquery

2 个答案: