javascript - 通过 php 和数组数据创建动态链接和 onClick

Question

背景:我通过 php 循环创建了 10 行 html 行，每行都有一个“更多信息”链接。我也将 JSON 数据解析为 html。我的问题是他们需要触发 javascript 函数并传递与每个特定行关联的变量的更多信息链接。

问题:为每个更多信息链接添加 onClick 是否更有意义，如下所示(示例 1):

<a href="#" onclick="return myFunction('123', 'food');">More Info</a>

或者我可以在 javascript 事件监听器上编写该事件监听器，该事件监听器将为每个更多信息链接触发，以及如何传递我的变量？ (示例2)

<a href="#" id="link_1">Click me</a>

$("#link_1").on('click', function() {

});

下面是我的 PHP，它创建了行和链接。

      $json = json_decode($data, true);

        $cleanHTML = "";

        foreach($json['restaurants'] as $val){

        $id = $val['restaurant']['id'];
        $sectionType = "food";

        $cleanHTML .= "<div data-content>
                            <article>
                                <div class='grid-container'>
                                      <div class='MainTitle'>". $val['restaurant']['name'] ."</div>";


    //THIS IS WHERE I NEED TO CREATE THE MORE INFO LINK
                $cleanHTML .= "<div class='VenueDescription'>";

                                     if(SwpmMemberUtils::is_member_logged_in()) {
        //THIS IS EXAMPLE ONE ABOVE:
$cleanHTML .=  "<a href='#' onclick="return myFunction('". $id ."', '". $sectionType ."');">More Info</a>";

        //OR THIS IS A TRY AT EXAMPLE TWO ABOVE:
$cleanHTML .=  "<a href='#' id='". $id ."'>More Info</a>";

                                            } else {


                                         $cleanHTML .=  "Click Here to Become a Member!";


                                            }
                $cleanHTML .=" </div>
                                      </div>
                                  </article>
                      </div>";

Answer 1

示例二是可行的方法，因为示例一在某种程度上缺乏面向 future 的能力。想象一下这样一种情况，您必须添加更多参数或更改，这些参数或更改需要在多个地方解决。

对于示例二的参数，您可以使用数据属性。 <a data-123="123" data-food="qweqwe" />并使用适当的数据方法访问它们。例如在 jQuery $(this).data('food') 中