javascript - PHP - 单击时从项目列表中的数组调用特定变量/与 JavaScript 混合

Question

我一直试图在单击某个项目时捕获数组中的变量，并且一直在努力。

我有一个项目列表，每个项目在数据库中都有自己的名称。加载页面时，这些项目会在页面上列出，单击可以打开一个新窗口，该窗口根据数组中的项目名称显示某些内容。

目前，我已成功将项目名称显示在页面上时放入数组中。但是，当我单击一个项目时，用于打开该项目的唯一窗口的变量包含数组中的每个变量(而不仅仅是我单击的项目的变量名称)。

在我的 PHP 代码中，我遍历数据库(取决于 isLive == 1)并将项目“channel_title”的每个名称添加到名为 $chName 的数组中。

$chResult = mysql_query($chSQL);
if ($chResult) {
    $chNum = mysql_num_rows($chResult);
if ($chNum>0) {     

    //Create the arraw
    $chName = array();

    while($row = mysql_fetch_array($chResult)) {

        //Add channel name to array
        $chName[] = ($row['channel_title']);


        if ($row['is_live']=="1") {
            $whatIsLive = "true";
        } else {
            $whatIsLive = "false";
        }

        echo 


         '<li id="'.$row['channel_id'].'" class="list-group-item col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="item">
                    <div class="item-head">
                        <div class="badges">';
                            if ($row['is_live']=="1") {
                                echo '<span class="badge-live">Live</span>';
                            }
                        echo 
                        '</div>
                    </div> 

                    <div class="item-image">
                        <a href="'.SERVERPATH.'channels/'.urlencode($row['channel_title']).'"target="window" onclick="openStreamPopup(); return false;" data-islive="'.$whatIsLive.'" title="'.$row['channel_title'].'">';
                            $activeSSImage = 'userData/'.$row['user_id'].'/channelImages/ss_'.$row['channel_id'].'_t.jpg';
                            $defaultSSImage = 'images/ss_default.jpg';
                            if (file_exists($activeSSImage)) {
                                echo '<img src="'.$activeSSImage.'?rand='.rand(0, 99999999).'" alt="'.$row['channel_title'].'" width="250" height="200">';
                            } else {
                                echo '<img src="'.$defaultSSImage.'" alt="'.$row['channel_title'].'" width="250" height="200">';
                            }
                            echo '<span class="image-cover"></span>
                            <span class="play-icon"></span>
                        </a>
                    </div>

                    </div>
                </div>
            </li>';
    }
} else {
    echo '';
}
} else {
    echo '';
}

上面的代码是:

<a href="'.SERVERPATH.'channels/'.urlencode($row['channel_title']).'"target="window" onclick="openStreamPopup(); return false;" data-islive="'.$whatIsLive.'" title="'.$row['channel_title'].'">';

它将编译器发送到一个 JavaScript 函数，该函数获取数组并将其分配给一个 JavaScript 变量 - 允许使用 window.open() 打开一个新窗口。这是通过以下代码完成的:

<script type="text/javascript">

var theChannel = <?php echo(json_encode($chName)); ?>; //Grab the Array $chName - call it theChannel
var windowObjectReference = null; // global variable

function openStreamPopup() {
  if(windowObjectReference == null || windowObjectReference.closed)
  /* if the pointer to the window object in memory does not exist
     or if such pointer exists but the window was closed */

  {
    windowObjectReference = window.open("channels/"+theChannel,
   "window", "resizable,scrollbars,status");  //Open link with theChannel (channel_title) as url

    /* then create it. The new window will be created and
       will be brought on top of any other window. */
  }
  else
  {
    windowObjectReference.focus();
    /* else the window reference must exist and the window
       is not closed; therefore, we can bring it back on top of any other
       window with the focus() method. There would be no need to re-create
       the window or to reload the referenced resource. */
  };

    console.log( "function complete" );
    console.log( theChannel );

}


</script>

我遇到的问题是，在这个创建的变量中包含数组的每个变量。因此，当我单击某个项目时，它会添加每个“channel_title”的 URL，而不仅仅是我单击的项目的“channel_title”。

我已经尝试了几个小时来解决这个问题 - 我对 PHP 和数组很糟糕。

我想要达到的效果就像 http://onperiscope.com/当您单击流时，它会在新窗口中打开该流。

感谢您的宝贵时间，如果我没有提供足够的信息，请告诉我。

Answer 1

我不确定我到底遵循了您想要的值，但我认为这样的事情应该让您朝着正确的方向前进:

PHP:

<a href="'.SERVERPATH.'channels/'.urlencode($row['channel_title']).'" target="window" onclick="openStreamPopup(\'' . $row['channel_title'] . '\'); return false;" data-islive="'.$whatIsLive.'" title="'.$row['channel_title'].'">

JavaScript:

function openStreamPopup(theChannel) {
  ...
  windowObjectReference = window.open("channels/"+theChannel, "window", "resizable,scrollbars,status");
  ...
}

因此，在 PHP 中，您将“当前”值作为字符串放入 openStreamPopup 调用中 (\'' . $row['channel_title'] . '\')，然后它将作为第一个参数在 JavaScript 函数调用中可用。

这应该能让事情正常工作，但通常我的偏好是将上下文值存储为元素上的 data- 属性，绑定(bind) onclick 事件，并在处理程序内部读取触发元素。