0

就在我即将发布这个问题时，我想出了一个简单的解决方案——一种解决方案。

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

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

<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加载？

4

2 回答 2

1

我的建议是最初会花费您更多时间，但从长远来看，我相信会对您有益。

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

我将我的文本存储在一个简单的 XML 文件中（我现在真的没有那么多文本，但你显然可以在数据库、txt 文件中执行它，无论你想要什么），然后我只是加载它$.ajax（使用asyncset以便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 时才对您开放（您可以轻松做到 — 只需更改您的文档类型）。这将像这样工作：

<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 属性或隐藏字段中并没有让我觉得非常语义化。希望这可以帮助！

于 2009-08-18T04:10:46.057 回答
0

我认为您的解决方案可以使用更多的调整。这样做会创建（可能）许多实际上并不需要的 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')) );
});
于 2009-08-06T21:44:04.257 回答