1

我的页面生成一个 jQuery 字符串（下面的 jqueryBlock），该字符串被 ajaxed 到一个 php 文件，该文件将它写入一个新的 html 文件，它将在那里执行。下面的代码“A”是我现在必须在新的 html 文件中生成最终的 jQuery，下面的“B”。

“一个”

    var targetName = "redbox";
    target = $('div[filename=' + targetName + ']').hide()[0];
    var jqueryBlock= '<script>$(function() {\n'; 
    jqueryBlock += "$('#" + this.id + "').click(function() {\n";
    jqueryBlock += "$('#" +  target.id + "').show();\n";
    jqueryBlock += "}).css('cursor', 'pointer');\n";
    jqueryBlock += "$('#" +  target.id + "').dblclick(function(){\n$(this).hide();\n});\n";
    jqueryBlock += "})<\/script>";

“乙”

    <script>$(function() {
    $('#T_1376594221987').click(function() {
                             $('#T_1376594237267').show();
                           })
                         .css('cursor', 'pointer');

    $('#T_1376594237267').dblclick(function(){
                            $(this).hide();
                          });
    })</script>

这一切都有效，但编写块 A 是一场噩梦，试图跟踪多级引号以及所有括号和大括号，并且无法换行以使它们更具可读性。我在想必须有一种方法可以做到这一点，我可以编写一些看起来更像“A”的完成 jQuery 的东西。任何人都可以提出更好的方法吗？谢谢。

4

3 回答 3

1

如果我理解了所有内容，您可以只将动态变量添加到 PHP 文件中，并将其更改为如下内容：

<script>$(function() {
$('#<?php echo $_GET['id']; ?>').click(function() {
                         $('#<?php echo $_GET['id']; ?>').show();
                       })
                     .css('cursor', 'pointer');

$('#<?php echo $_GET['id']; ?>').dblclick(function(){
                        $(this).hide();
                      });
})</script>
于 2013-08-15T19:32:24.047 回答
1

好的，好吧...我想出了一些想法...您可能喜欢其中的一些，全部或一个都不喜欢。但我想我会把它贴在这里。只是几个技巧。您也可以查看JsFiddle。

首先，创建一个用于创建 jQuery 选择器的函数。这样，您只需传递 id 并获取您的选择器，无需担心引号。

function makeJqIdSelector(id) {
    return "$('#" + id + "')";
}

同样的思维方式，您可以编写函数以将某些内容包装在<script>标签（甚至是function.

function wrapScriptTags(scr) {
    return "<script>\n" + scr + "\n<\/script>";
}

最后，您可以使用数组来连接元素，这样您就不必一直输入\ns。IE：

var arr = [];
arr.push("a",
         "b",
         "c"
          );
var str = arr.join("\n");
//output:
//a 
//b
//c

这还具有更高效的附加效果。（对于现代浏览器来说可能不是问题，尤其是这几个字符串）

这一切都在一起：

var thisSelect = makeJqIdSelector(this.id);
var targetSelect = makeJqIdSelector(target.attr('id'));

var jblock = [];
jblock.push(
    "$(function() {", 
    thisSelect + ".click(function() {", 
    targetSelect + ".show();",
    "}).css('cursor', 'pointer');", 
    targetSelect + ".dblclick(function(){\n$(this).hide();",
    "});",
    "});"
);
var jqueryBlock = wrapScriptTags(jblock.join("\n"));

输出

<script>
$(function() {
$('#T_1376594221987').click(function() {
$('#T_1376594237267').show();
}).css('cursor', 'pointer');
$('#T_1376594237267').dblclick(function(){
$(this).hide();
});
});
</script>

注意：显然，我没有花很多时间来确保输出是完美的。这只是为了技术 - 我没有真正的测试方法。

于 2013-08-15T20:12:48.880 回答
1

在 coffeescript 中，您可以使用一个文本块来跟踪您的缩进级别。也许您可以仅针对此脚本更改为咖啡脚本。

http://coffeescript.org/#strings

于 2013-08-15T19:33:28.700 回答