动态函数Jquery

Question

嗨我有两个函数，一个带有一个参数，另一个叫做'goToMatchDetailPage'，带有两个参数。我正在尝试将两个变量放到第二个函数中，但它最终只会转到第一个参数，而第二个参数则为空，它会显示为“未定义”。

match.Home and match.Away是我想通过'goToMatchDetailPage'传递的两个动态变量。 它把match.Home和match.Away作为一个变量，我希望它们分开。

以下是代码

  function generateMatchLink(match){
  //<li data-role="list-divider">Divider</li>

    var currentDate = match.Date;
    var time = match.Time.replace(":00", "");

    if(oldDate != currentDate){
    //debugger
    oldDate = match.Date;
return '<li data-role="list-divider" data-theme="b">\ ' + oldDate + '\ </li><li  data-icon="false"><a href="javascript:void(0)'
    + '" onclick="goToMatchDetailPage(\''
    + match.Home + ',' + match.Away +'\')">'
        + ' <div class="ui-grid-a" data-theme="none" style="height:20px">'
        + ' <div class="ui-block-a" style="width:40%">' + match.Home + '</div>'
        + ' <div class="ui-block-b" style="width:20%">' + time + '</div>'
        + ' <div class="ui-block-c" style="width:40%">' + match.Away + '</div></div></a></li>';

    }else{

    return '<li data-icon="false"><a href="javascript:void(0)'
    + '" onclick="goToMatchDetailPage(\''
    + match.Home + ',' + match.Away +'\')">'
        + ' <div class="ui-grid-a" data-theme="none">'
        + ' <div class="ui-block-a" style="width:40%">' + match.Home + '</div>'
        + ' <div class="ui-block-b" style="width:20%">' + time + '</div>'
        + ' <div class="ui-block-c" style="width:40%">' + match.Away + '</div></div></a></li>';

    }

}

这是第二个功能

function goToMatchDetailPage(matchHome, matchAway){

    //create the html template
    var matchPage = $("<div data-role='page' data-url=dummyUrl><div data-role='header'><h1>"
      + matchHome + "</h1></div><div data-role='content'><div data-role='tabs'>"
  + "<div data-role='navbar'>"
  +  "<ul>"
  +    "<li><a href='#fragment-1'>" + matchHome + "</a></li>"
  +   "<li><a href='#fragment-2'>" + matchAway + "</a></li>"
  +  "</ul>"
  + "</div>"
  + "<div id='fragment-1'>"
  +  "<p>This is the content of the tab 'One', with the id fragment-1.</p>"
  + "</div>"
  + "<div id='fragment-2'>"
  +  "<p>This is the content of the tab 'Two', with the id fragment-2.</p>"
  + "</div></div></div>");

    //append the new page to the page contanier
    matchPage.appendTo($.mobile.pageContainer);

    //go to the newly created page
    $.mobile.changePage(matchPage);
}

Answer 1

作为使用模板执行此操作的示例（并避免引用问题）：

定义未知类型的虚拟脚本块（因此不运行）：

<script id="homeTemplate" type="text/template">
    <li data-role="list-divider" data-theme="b">{oldDate}</li>
    <li data-icon="false">
        <a href="javascript:void(0)" onclick="goToMatchDetailPage('{home}','{away}')">
            <div class="ui-grid-a" data-theme="none" style="height:20px">
                <div class="ui-block-a" style="width:40%">{home}</div>
                <div class="ui-block-b" style="width:20%">{time}</div>
                <div class="ui-block-c" style="width:40%">{away}</div>
            </div>
        </a>
    </li>
</script>

这使HTML更清晰，更易于维护。只需为每个必需的模板创建一个。

注意：我只使用{placeholder}，因为大括号通常不会出现在HTML中。它可以是您想要的任何分隔符，也可以只匹配模板中的唯一名称。大括号实际上使匹配的正则表达式replace更加丑陋，因为它们需要以\{和\}进行转义，因此您可能希望使用更简单的仅使用名称的路径。

通过id：

引用模板

var homeTemplate = $('#homeTemplate');

将您定义的占位符替换为实际值：

homeTemplate = homeTemplate.replace(/\{home\}/g, match.Home);
homeTemplate = homeTemplate.replace(/\{away\}/g, match.Away);
homeTemplate = homeTemplate.replace(/\{time\}/g, time);
homeTemplate = homeTemplate.replace(/\{oldDate\}/g, oldDate);

// Now insert the template
$.mobile.pageContainer.append(homeTemplate);

replace显然可以连接起来以缩短代码，但在这里可读。

替换使用/g的{​​{1}}“全局”选项，因为regex默认只替换第一个匹配

继续（感谢ezanker的评论）：

jQuery的一个优点是你根本不需要在HTML中拥有代码（例如onclick处理程序）。

如果您的元素是动态创建的，则可以使用委派的版本的replace来过滤活动时的元素。

这次模板没有代码，只有数据属性中的一些额外数据和一个用于识别元素的类：

e.g。 [on][1]

<a href="#" class="hotlink" data-home="{home}" data-away="{away}">

home和away值存储在data-attributes中，而不是传递给函数调用。

您使用<script id="homeTemplate" type="text/template"> <li data-role="list-divider" data-theme="b">{oldDate}</li> <li data-icon="false"> <a href="#" class="hotlink" data-home="{home}" data-away="{away}"> <div class="ui-grid-a" data-theme="none" style="height:20px"> <div class="ui-block-a" style="width:40%">{home}</div> <div class="ui-block-b" style="width:20%">{time}</div> <div class="ui-block-c" style="width:40%">{away}</div> </div> </a> </li> </script> 连接事件，如下所示：

delegated on

这基本上是在文档级别上监听点击（可以是目标上方不会动态更改的任何元素，但文档很常见）。当click事件发生时，然后在第二个参数中应用jQuery选择器（在这种情况下，所有$(document).on('click', 'a.hotlink', function(e){ e.preventdefault(); // This stops the click of the link navigating var $link = $(this); var home = $link.data('home'); var away = $link.data('away'); goToMatchDetailPage(home, away); }); 都带有anchors类）以计算出单击了哪个元素，然后在第三个中运行该函数针对该元素的参数。这允许动态添加元素以生成点击（简单的hotlink不起作用）。

Answer 2

我认为你只是缺少一些引用：

onclick="goToMatchDetailPage(\'' + match.Home + ',' + match.Away +'\')

将解析为包含逗号的单个参数：

onclick="goToMatchDetailPage('match.Home, match.Away')

你需要这个：

onclick="goToMatchDetailPage(\'' + match.Home + '\', \'' + match.Away +'\')