将参数传递给另一个函数并传递给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> 

带有“未捕获的SyntaxError：意外的标识符” JS错误。 我该如何解决？ 谢谢！

Answer 1

在函数调用中使用data属性使用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更新了无jQuery，请尝试一下让我知道它是否有效，尽管推荐使用jQuery