javascript - 每次点击 jquery 更改值

Question

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

如有任何帮助，我们将不胜感激。谢谢

http://jsfiddle.net/breezy/nzw05xm3/

$(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

在该特定元素的点击事件中获取跨度的文本。

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

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

Updated fiddle