Question

我有一个包含几个按钮和一个文本输入的html块。应在不同情况下更改此文本输入的占位符。因此我添加一个字符串变量。然后我把html放在另一个字符串变量中：

var dataType;

var htmlBlock = `<div class="icon negative big toleft" id="cancel-btn"><i class="fas fa-minus-circle"></i></div>
<div class="icon add big toleft"><i class="fas fa-check-circle"></i></div>
<input type="text" class="contact-input" style="margin-bottom: 5px;" maxlength="50" name="my-contact-phone" data-name="Name" placeholder=${dataType}>`

如您所见，在html代码的最后一行，我在占位符部分添加了$ {dataType}。

然后我用这些代码：

if (document.getElementsByClassName('.js-phone'))
{
  dataType = "Add your number "
  this.html = this.phone.html();
  this.phone.html(
    htmlBlock
  )
};

编译后，在文本输入占位符中，此文本显示为：undefined

有谁可以帮助我，我怎么能这样做？我们将不胜感激。

Answer 1

您的占位符需要用双引号括起来＆＃34;＆＃34;。如果您需要$（dataType）将值作为占位符放置（我假设为jQuery值），您需要连接字符串，如下所示：

placeholder="' + dataType + '"

不要错过你连接的双引号之间的单引号。看起来您正在尝试使用jquery获取和设置值。获取对象的价值比较好，例如： $（myVal）.val（），然后使用该变量将其设置为其他代码。

Answer 2

在引用其他JavaScript变量之前，您需要关闭字符串。然后将字符串与＆＃39; +＆＃39;连接起来。操作员并完成标签。例如：

var htmlBlock = '...<input type="text" class="contact-input" style="margin-bottom: 5px;" maxlength="50" name="my-contact-phone" data-name="Name" placeholder=' + dataType + '>';

引号中的任何内容都将被视为字符，而非程序代码。

Answer 3

在您的情况下，您的dataType变量应在之前定义，您将在字符串文字（模板）中使用该变量：

Answer 4

您可以将htmlBlock变量转换为接收参数的函数＆＃34; dataType＆＃34;并返回您喜欢的html数据字符串。

这是JavaScript的简化版本：

测试是否存在具有className＆＃39; js-phone＆＃39;
触发窗口提示，询问用户信息（电话号码）
然后该信息将保存到变量＆＃39; dataType＆＃39;
该变量传递给htmlBlock函数
反过来，返回带有新值的html数据字符串

＆＃13;

function htmlBlock( dataType ){
  // the important keyword here is "return" ...
  // when this function is called, it will give back
  // (or return) the html string described here
  return `<div class="icon negative big toleft" id="cancel-btn"><i class="fas fa-minus-circle"></i></div>
<div class="icon add big toleft"><i class="fas fa-check-circle"></i></div>
<input type="text" class="contact-input" style="margin-bottom: 5px;" maxlength="50" name="my-contact-phone" data-name="Name" placeholder="${dataType}">`;
}

if (document.getElementsByClassName('js-phone')){
  // window.prompt will return the value put in by the 
  // user -- this assigns that returned value to a 
  // variable named dataType
  var dataType = window.prompt('What is your phone number?');
  // this is just grabbing the first element with the
  // 'js-phone' class and adding the html data from
  // the htmlBlock() function
  document.getElementsByClassName('js-phone')[0].innerHTML = htmlBlock( dataType );
  // the key here is the call to htmlBlock( dataType )
  // we got dataType from the prompt
  // and the htmlBlock is our function written above.
};

＆＃13;

<div class="js-phone"></div>

＆＃13;

在html代码中添加字符串变量

4 个答案: