更改每次點擊jQuery的值

Question

我希望能夠使用span元素text更改class="downloadtext"的值。 您可以在下面看到我的書寫方式，但是它會在所有spans文本中附加/更改值-而不是一次只更改一個跨度標簽文本。

任何幫助，將不勝感激。 謝謝

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

獲取該特定元素的click事件內的范圍文本。

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

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

更新的小提琴

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/