Question

我正在尝试使用'Made by'加上“companyName”文本更改div类“instock”中的文本

<div class="productDetails">
<div class="description">
<span class="companyName>The Company Name</span>
</div>
<div class="instock">Handmade to order</div>
<div>

我希望instock看起来像这样：

<div class="instock">Made by The Company Name</div>

我试过这个

var companyName = document.getElementsByClassName('companyName');
var companyNameText = companyName.nodeValue;
var instock = document.getElementsByClassName('instock');
var instockAlt = instock.nodeValue;
instockAlt.textContent = 'Made by' + companyNameText;

此外，可能并不总是需要这样做（当没有公司名称可以更改时）我想我需要先检查span类是否存在。

Answer 1

"中缺少<span>。这一行：

var companyName = document.getElementsByClassName('companyName');

返回HTMLCollection。将其更改为：

var companyName = document.getElementsByClassName('companyName')[0];
var companyName = document.querySelector('.companyName');

如果您使用的是jQuery，请使用：

var companyName = $('.companyName');
var companyNameText = companyName.text();
var instock = $('.instock');
var instockAlt = instock.text();
instockAlt.text('Made by' + companyNameText);

原因是，textContent无处不在，而有些浏览器使用innerText。 jQuery处理这样的浏览器不兼容问题。

此外，最终代码为</div>而不是<div>。

如果整个代码是一个区块，那么你需要使用一个上下文方式：

$(function () {
  $('.instock').each(function() {
    if ( $(this).prev('.description').find('span').length )
      $(this).text('Made by ' + $(this).prev('.description').find('span').text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productDetails">
  <div class="description">
    <span class="companyName">The Company Name</span>
  </div>
  <div class="instock">Handmade to order</div>
</div>

Answer 2

使用jQuery，你可以做到：

$('.instock').html(function() {
  if ( $(this).prev('.description').find('span').length ) return 'Made by ' + $(this).prev('.description').find('span').html()
})

<强> jsFiddle example

Answer 3

使用JQuery，您可以执行以下操作

var companyName = $('.companyName').text();
if(companyName){
  $('.instock').html('Made by ' + companyName);
}

使用另一个文本更改div类中的文本

3 个答案: