将参数传递给另一个函数并传递给 innerHTML

Question

我已经构建了自己的灯箱，并且运行良好。我构建了自己的框架，因为我需要它没有框架，并且在我正在构建的游戏中也能很好地工作。但是，我运行遇到了一个问题，我相当确定它很简单，但事实证明这对我来说相当麻烦。我遇到的问题是采用参数 "slideName" 并将其传递给 "fillRightButton()" 函数。

var createSlidebox = function(cancelButton, bannerImg, slideName) {
 fillRightButton("nextSlide",slideName);
};

这是该函数的一部分：

var fillRightButton = function(rightButtonType, rightDestination) {

  if (rightButtonType === "nextSlide") {
    document.getElementById("lightbox_fright").innerHTML = '<a onclick="changeSlide(' + rightDestination + ')">Next</a>';
  }
}

"fillRightButton()"函数在直接调用时表现良好，如果直接传入参数，这段代码有效：

var createSlidebox = function(cancelButton, bannerImg, slideName) {
  fillRightButton("nextSlide", "mySlideName");
};

但是，没有引号它呈现为：

<a onclick="changeSlide([object Object])">Next</a>

有一个 "Uncaught SyntaxError: Unexpected identifier" JS 错误。我将如何解决这个问题？谢谢！

Answer 1

在函数调用

中使用数据属性存储使用 jQuery 的对象

var fillRightButton = function(rightButtonType, rightDestination) {
  if (rightButtonType === "nextSlide") {
    document.getElementById("lightbox_fright").innerHTML = '';
    // document.getElementById("lightbox_fright").innerHTML = '<a onclick="changeSlide( $(this).data('dest') )">Next</a>';
    var a = document.createElement('a');
    a['data-dest'] = rightDestination;
    a.onclick=function(){changeSlide( this['data-dest']); }
    a.innerHTML = 'Next';
    document.getElementById("lightbox_fright").appendChild(a);
    //document.getElementById('lightbox_fright > a').data({'dest':rightDestination});
  }
}

如果尚未包含，请使用 jQuery

PS 已更新 w/o jQuery 请试一试如果有效请告诉我，建议使用 jQuery 虽然

将参数传递给另一个函数并传递给 innerHTML

Pass a Parameter to Another Function and Into innerHTML

html

javascript

parameter-passing