Question

我有一个span元素如下：<span id="download">Download</span>。该元素由几个单选按钮控制。基本上，我想要做的是有一个按钮来下载单选按钮选择的项目，但我希望通过更改<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。

Answer 1

尝试使用

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

或

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

Answer 2

这不起作用的原因是$("input[name=method]")匹配输入类型的每个元素，并且具有name的属性，其值为“method”。也就是说，如果您使用复选框，则每个复选框都有该名称。我相信val方法返回第一个匹配元素的值 - 无论是否被选中。

请参阅此测试页：http://jsbin.com/igixa4

您可能想要添加the :checked selector。

所以我将如何实现它：

$("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);       
});

如何使用jQuery更改<span> </span>元素中的文本？

2 个答案: