Question

正当我即将发布这个问题时，我想出了一个简单的解决方案解决方案。

问题是我需要多种语言的确认消息，具体取决于用户选择的语言。因为我总是从HTML中获取某些信息，所以我试图这样做，但是却陷入了这一点：

这是用户的简单删除按钮，使用带有正确消息的title属性（在此示例中，它只是文本;在代码中，它是包含正确翻译的变量）：

<input type="submit" name="delete" value="Delete me" title="Are you sure?" />

然后我用jQuery检索该行并将其显示在确认框中，如下所示：

$("input[type='submit'][name='delete']").click(function() {
  return confirm($(this).attr('title'));
});

然而，这仍然意味着输入元素具有鼠标悬停可见的标题，我不喜欢。删除它实际上不是一个选项，因为取消确认框并再次单击该按钮将导致空消息。

无论如何，这整个方法对我来说并不适用于检索简单的文本行。然后我想到了$ .get（） - 我不知道为什么我之前没有想到这一点，因为我在其他场景中一直使用它。

所以我想这是一个非常好的解决方案，可以直接将正确的文本导入JavaScript，而无需处理HTML并读取标题或其他属性。


$("input[type='submit'][name='delete']").click(function() {
    $.get('something.php', {
            action: 'getText',
            variable: 'confirm_delete'
        }, function(text) {
            return confirm(text); // doesn't return instantly...
      });
    return false; // breaks the form action...
});

的更新的
好的，现在我把它转回到关于jQuery脚本最后一部分的问题。似乎$.get()需要一些时间来检索信息。它可能没有太多时间，但它是一些，同时，表格已经提交。底部的return false部分地解决了这个问题，因为它是第一个被返回的东西。但是，当return confirm跟随时，单击“确定”将无法执行任何操作，因为return false已停止默认按钮操作。

所以..我的问题是：有没有办法使用$.get()检索文本，并且表单提交会一直等到return confirm被加载？

Answer 1

我建议的是最初会花费你多一点时间的东西，但我认为长期会让你受益。

我有一个项目也设置为多语言，所以我在页面上做的第一件事就是加载该页面所需的文本。

我将我的文本存储在一个简单的XML文件中（我现在真的没有那么多文本，但显然你可以在数据库，txt文件中，无论你想要什么），然后我只需加载它$.ajax（async设置为false，以便在您尝试调用之前知道文本已全部加载）。我将此设置为我的language对象，它将语言代码作为参数。因此，通过在页面的开头调用language = new language('en-us');，我可以在需要时轻松获取任何与语言无关的文本。例如，如果您将此应用于您的项目，那就很简单：

$("input[type='submit'][name='delete']").click(function() {
  return confirm(language.text('are_you_sure'));
});

编辑：我也想说这也适用于PHP，因为您可以从PHP和jQuery读取相同的XML文件，从而将所有文本保存在一个集中的位置

如果您不喜欢这种方法，我会指出另外两种类似于您尝试过的HTML方法。首先是简单地使用input[type=hidden]字段。这样，你就不会有你不喜欢的鼠标悬停效果。然后你可以做这样的事情：

<input type="hidden" name="confirm_text" value="Are you sure?" />
$("input[type='submit'][name='delete']").click(function() {
  return confirm($('input[name=confirm_text]').val());
});

但是，我认为这很粗糙，说实话，而且不是很语义。另一个选项是使用data-属性，但只有在您使用HTML5时才能使用此属性（您可以轻松地执行此操作 - 只需更改您的doctype）。这将是这样的：

<input type="submit" name="delete" value="Delete me" data-confirmtext="Are you sure?" />
$("input[type='submit'][name='delete']").click(function() {
  return confirm($(this).attr('data-confirmtext'));
});

在所有这些选项中，我绝对认为第一个是最好的选项，因为您对最佳实践和语义感兴趣。尝试将随机数据存储在不相关的HTML属性或隐藏字段中并不会让我觉得非常语义。希望这有帮助！

Answer 2

我认为您的解决方案可以使用更多调整。这样做可以创建（可能）许多非必要的ajax请求。

您可以使用rel属性：

<input type="submit" name="delete" value="Delete me" rel="Are you sure?" />

然后

$("input[type='submit'][name='delete']").click(function() {
  return confirm($(this).attr('rel'));
});

更好的是，您可以在rel属性中存储密钥，例如rel='confirmation.delete'。然后有一个解释器，如：

var stringLibrary = {
    prompt: {
        foo: "Enter your foo:",
        bar: "How many bars?"
    },
    confirmation: {
        delete: "Are you sure you want to delete that?"
    },
    error: {
        codes: {
            324: "Oh no!",
            789: "Oh yes!"
        }
    }
};

var trans = function(key) {
    var result = stringLibrary;
    key = key.split(".");

    for ( var i in key ) {
        if ( result[ key[i] ] ) {
            result = result[ key[i] ];
        } else {
            return null;
        }
    }

    return result;
}

用法：

console.log(trans("prompt.foo"));
console.log(trans("confirmation.delete"));
console.log(trans("error.codes.324"));
console.log(trans("i.dont.exist"));

$("input[type='submit'][name='delete']").click(function() {
  return confirm( trans($(this).attr('rel')) );
});

jQuery / PHP和多语言确认/警告框

2 个答案:

用法：