使用 jQuery 访问按钮的替代文本

Question

我有两个 ID 相同但替代文本不同的按钮属性。单击按钮时，我需要 该按钮的 替代文本加载到文本框中。我目前只收到 "undefined"

$(document).ready(function() {
  $('button').on('click', function() {
    var sentence = $('button').prop('alt');
    var text = $('#the_box');
    text.val(text.val() + sentence + ' ');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-8 col-xs-offset-2">
      <h5 style="text-align:center;">
        The buttons have alt="" text that needs to be added to the contents of the textbox when pressed.
      </h5>
      <div style="box-shadow:2px 2px 5px black; min-height:200px; padding:25px; margin:10px;">
        <textarea id="the_box" class="form-control" rows="3"></textarea>
        <button class="btn" id="hotlink" alt="I am very concerned.">Concerned</button>

        <button class="btn" id="hotlink" alt="I am very happy.">Happy</button>
      </div>
    </div>

  </div>

</div>

Link to problem on JS fiddle

Answer 1

试试这个，你需要使用 attr 函数而不是 prop 和 $(this) 而不是 $('button')

$(document).ready(function() {
  $('button').on('click', function(e) {
    var sentence = $(this).attr('alt');
    var text = $('#the_box');
    text.val(text.val() + sentence + ' ');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-8 col-xs-offset-2">
      <h5 style="text-align:center;">
        The buttons have alt="" text that needs to be added to the contents of the textbox when pressed.
      </h5>
      <div style="box-shadow:2px 2px 5px black; min-height:200px; padding:25px; margin:10px;">
        <textarea id="the_box" class="form-control" rows="3"></textarea>
        <button class="btn" id="hotlink" alt="I am very concerned.">Concerned</button>

        <button class="btn" id="hotlink" alt="I am very happy.">Happy</button>
      </div>
    </div>

  </div>

</div>

Answer 2

您想为按钮设置唯一 ID 并使用 $(this) 访问单击的按钮。 alt 也是一个 HTML 属性

$(document).ready(function() {
  $('button').on('click', function() {
    var sentence = $(this).attr('alt');
    var text = $('#the_box');
    text.val(text.val() + sentence + ' ');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-8 col-xs-offset-2">
      <h5 style="text-align:center;">
        The buttons have alt="" text that needs to be added to the contents of the textbox when pressed.
      </h5>
      <div style="box-shadow:2px 2px 5px black; min-height:200px; padding:25px; margin:10px;">
        <textarea id="the_box" class="form-control" rows="3"></textarea>
        <button class="btn" id="hotlinkConcerned" alt="I am very concerned.">Concerned</button>

        <button class="btn" id="hotlinkHappy" alt="I am very happy.">Happy</button>
      </div>
    </div>

  </div>

</div>

Answer 3

您应该使用 ID 来唯一标识整个 HTML 页面中的元素。要更好地访问 alt 属性，请使用 attr() 函数，prop() 用于 retrieve property 值（例如复选框的选中状态）

换你HTML密码

    <button class="btn hotlink" alt="I am very concerned.">Concerned</button>

    <button class="btn hotlink" alt="I am very happy.">Happy</button>

因此，您的脚本将是

$(document).ready(function() {
 $('document').on('click', '.hotlink', function() {
   var sentence = $(this).attr('alt');
   var text = $('#the_box');
   text.val(text.val() +' '+ sentence + ' ');
 });
});

使用 jQuery 访问按钮的替代文本

Accessing a button's alt text using jQuery

javascript

this

alt