如何使用jQuery更改元素中的文本？

我有一个span元素，如下所示：下载。此元素由几个单选按钮控制。基本上，我想做的是有一个按钮来下载单选按钮所选择的项目，但我希望通过更改中的文本来更具体地说明他们正在下载的内容，从而使其更加华丽。span是下载按钮，我将其设置为动画，以便span调用slideUp，然后更改文本，然后通过slideDown返回

$("input[name=method]").change(function() {
    if($("input[name=method]").val() == 'installer') {
        $('#download').slideUp(500);
        $('#download').removeClass("downloadRequest").removeClass("styling").css({"cursor":"default"});
        $('#download').text("Download");
        $('#download').addClass("downloadRequest").addClass("styling").css({"cursor":"pointer"});
        $('#download').slideDown(500);
    }
    else if($("input[name=method]").val() == 'url') {
        $('#download').slideUp(500);
        $('#download').removeClass("downloadRequest").removeClass("styling").css({"cursor":"default"});
        $('#download').text("Download From Vendor Website");
        $('#download').addClass("styling").addClass("downloadRequest").css({"cursor":"pointer"});
        $('#download').slideDown(500);
    }
});

---

我对代码做了一点修改，使其更具可读性，因此我知道它没有jQuery如此雄辩地允许的短代码。代码中的所有内容都能正常工作，除了跨度内文本的更改。我相信这是一个简单的解决方案，我只是忽略了

感谢您的帮助

Eric R.

尝试使用

$('#download').html("Download From Vendor Website")

或

---

这不起作用的原因是$input[name=method]匹配每一个input类型的元素，并且具有name属性和method值。也就是说，如果您使用复选框，则每个复选框都具有该名称。我相信val方法返回第一个match元素的值，不管它是否被选中

请参阅此测试页面：

您可能需要添加

那么我将如何实施它：

$("input[name=method]").change(function() {
  $download = $('#download');
  $download.slideUp(500).removeClass("downloadRequest").removeClass("styling")
    .css({"cursor":"default"});
  switch($("input[name=method]:checked").val()) {
    case 'installer' :
      $download.text("Download");
      break;
    case 'url':
      $download.text("Download From Vendor Website");
      break;
  }
  $download.addClass("styling").addClass("downloadRequest")
    .css({"cursor":"pointer"}).slideDown(500);       
});

---

$‘下载’。文本下载；对于更改文档内部的文本是正确的。一定是其他问题导致它无法工作。您确定没有具有相同ID的其他元素吗？除了缺少变量外，您的代码看起来还不错。另一方面，您的代码效率很低。反复调用$'download'将调用选择器解析器，后跟querySelector或getElementById，这意味着您要多次遍历DOM。你应该将$'download'存储在一个变量中，或者链接所有的方法，并且只查找一次。我对代码做了一些修改，使其更具可读性…**不要这样做**。如果您没有发布问题，那么我们可能看不到问题，请确保您发布了正在运行的代码，否则可能会引入任何数量的转换错误或修复。你在你的问题中尝试过文字代码吗？我知道，我让它变得低效纯粹是为了让每个人都更容易阅读。这不是我的代码看起来的样子，所有的东西都是链接的@Nick我刚刚在所有方法之间添加了选择器。不会改变输出，只是改变它的读取方式。如果文本不起作用，那么它的效率会非常低。你怎么会认为它会起作用呢？当你试图更改文本时，使用.html不是一个好主意。值得一试，如果存在重复id问题，可能它会错误地呈现页面的另一部分并帮助识别它。val也会在IE中爆炸，因为它不是一个元素，它只是一个元素。如果代码中的其他所有内容都正常工作，那么它也可能不是重复的id问题。为什么每个复选框都会将method设置为name属性？不管你的回答是否正确，你的回答都是非常假设的。谢谢。我完全忽略了API中选择器的细节。实际上，它每次都返回第一个的值。我把它改为$input:radio[name=method]：选中].val，这样可以正确地返回它。@Andy我想我写它的方式有点混乱。我试图澄清一下。

$("input[name=method]").change(function() {
  $download = $('#download');
  $download.slideUp(500).removeClass("downloadRequest").removeClass("styling")
    .css({"cursor":"default"});
  switch($("input[name=method]:checked").val()) {
    case 'installer' :
      $download.text("Download");
      break;
    case 'url':
      $download.text("Download From Vendor Website");
      break;
  }
  $download.addClass("styling").addClass("downloadRequest")
    .css({"cursor":"pointer"}).slideDown(500);       
});