Question

我的网站上有一个功能脚本，当将特定的类添加到链接时，该脚本允许我在新窗口中打开链接。我的网站上需要很多，所以我想通过使用变量可以使脚本的编辑更容易。

在更改变量的硬编码字符串的过程中，我的脚本虽然停止工作。唯一有效的方法是在其中设置网址的var。

我了解到$ {}并非在所有地方都有效。希望有人指出我的想法是错误的。也希望我正确理解了术语，尽管尝试学习！：-）

get

Answer 1

${}的使用都不是有效的JavaScript语法。

您的函数声明可以替换为：

window[function1Name] = function () {
    window.open(function1Url, "_blank", "height=200");
}

请注意，函数will no longer be hoisted是以这种方式声明的，因此操作顺序很重要。

点击处理程序可以编写如下：

jQuery(function1Class).click(function() { // Note that I just used the variable there.
    window[function1Name]();
});

JavaScript中有一个${}概念，但这仅在模板文字中存在：

const myVariable = "Foo";
const message = `myVariable contains: "${myVariable}"!`;
console.log(message);

Answer 2

这里有几个语法问题。

首先，function ${function1Name}()无效的语法。函数名称必须在运行时之前定义。如果要动态访问函数，请将其放在对象中并使用变量引用设置键。

第二，${function1Name}()还是无效的语法。您不能动态地调用类似的功能。参考上面的建议，您可以动态访问对象，因此第一点可以解决此问题。

第三，字符串插值仅在template literals内有效，因此您需要使用反引号``来分隔字符串。但是在这里完全多余，因为您只需使用$(function1Class)

考虑到这些问题，下面是一个更新的示例：

var function1Name = "test_function";
var function1Url = "https://www.google.com";
var function1Class = ".test_function_class";

var funcObj = {
  [function1Name]: function() {
    console.log(`function called, window would open here containing ${function1Url}...`);
    // window.open(function1Url, "_blank", "height=200");
  }
}

$(function1Class).click(function() {
  funcObj[function1Name]()
});

/*
alternative using a template literal, although note that it's redundant here
$(`${function1Class}`).click(function() {
  funcObj[function1Name]()
});
*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="test_function_class">Click me</a>

要注意的最后一件事是IE版本不支持模板文字，因此在使用它们之前请确保您的浏览器支持要求。

Answer 3

太酷了，我明白了！

var function1Name		=	"test_function_1";
var function1Url		=	"https://www.google.com";	
var function1Class		=	".test_function_class1";	

var function2Name		=	"test_function_2";
var function2Url		=	"https://www.cnn.com";	
var function2Class		=	".test_function_class2";	



// Function 1	
window[function1Name] = function () {
    window.open(function1Url, "_blank", "toolbar=no,status=no,scrollbars=yes,resizable=yes,top=500,left=500,width=600,height=745");
}

jQuery(function1Class).click(function() { 
    window[function1Name]();
});


// Function 2	
window[function2Name] = function () {
    window.open(function2Url, "_blank", "toolbar=no,status=no,scrollbars=yes,resizable=yes,top=500,left=500,width=600,height=745");
}

jQuery(function2Class).click(function() { 
    window[function2Name]();
});

我现在可以按照自己的意图添加一堆url和相应的类。对此感到非常高兴。

但是，有一个后续问题，因为我将不得不尝试理想的窗口参数是什么，因此我也试图将这些参数设置为变量。我已经试过了如何插入功能代码输出的变量的示例，但是这些方法在这里不起作用。这是代码：

var windowWidth			=	250	
	
var function1Name		=	"test_function_1";
var function1Url		=	"https://www.google.com";	
var function1Class		=	".test_function_class1";	

var function2Name		=	"test_function_2";
var function2Url		=	"https://www.cnn.com";	
var function2Class		=	".test_function_class2";	



// Function 1	
window[function1Name] = function () {
    window.open(function1Url, "_blank", "toolbar=no,status=no,scrollbars=yes,resizable=yes,top=500,left=500,width=[windowWidth],height=745");
}

jQuery(function1Class).click(function() { 
    window[function1Name]();
});


// Function 2	
window[function2Name] = function () {
    window.open(function2Url, "_blank", "toolbar=no,status=no,scrollbars=yes,resizable=yes,top=500,left=500,width=600,height=745");
}

jQuery(function2Class).click(function() { 
    window[function2Name]();
});

如何在其中插入变量值（Function1的第二行）？

交换变量的硬编码参数

3 个答案: