订阅Youtube频道时获取特定div的ID

Question

我需要在用户订阅或取消订阅时显示Youtube频道的名称。

下面是两个订阅按钮和一个事件脚本。

<script src="https://apis.google.com/js/platform.js"></script>
<div id="chan-1" class="g-ytsubscribe" data-channel="SMOSH" data-layout="default" data-count="default" data-onytevent="onYtEvent"></div>
</div>
<div id="chan-2" class="g-ytsubscribe" data-channel="Apple" data-layout="default" data-count="default" data-onytevent="onYtEvent"></div>
</div>
<script>
  function onYtEvent(payload) {
    if (payload.eventType == 'subscribe') {
      // Need to display subscribed channel name
    } else if (payload.eventType == 'unsubscribe') {
      // Need to display unsubscribed channel name
    }
    if (window.console) { // for debugging only
      window.console.log('YT event: ', payload);
    }
  }
</script>

Answer 1

有两种方法可以做到这一点。

1. 将payload参数中传递的外部id与通道id

   匹配

   payload参数包含channelExternalId，其中包含该频道的youtube id。你可以保留一个你想要显示的通道的外部id列表，当yevent触发时，将channelExternalId匹配到正确的通道名称

   var channelNamesById = {
      "UCY30JRSgfhYXA6i6xX1erWg":"SMOSH",
      "UCE_M8A5yxnLfW0KghEeajjw":"Apple"
   };
   function onYtEvent(payload){
       var channelName = channelNamesById[payload.channelExternalId];
   }
   

   有几种方法可以获得通道id，参见这里

2. 动态创建按钮，并将通道名称绑定到yevent回调函数，该函数将通道名称作为参数传递

   api还允许您动态创建按钮。当你以这种方式创建按钮时你可以让通道名传递给回调函数

   Html

   <div id="chan-1"></div>
   <div id="chan-2"></div>
   

   JS

   gapi.ytsubscribe.render(
      document.querySelector("#chan-1"),
      {
          "channel": "SMOSH", 
          "layout": "default",
          "count":"default",
          "onytevent":onYtEvent.bind(null,"SMOSH")
      }
   );
   gapi.ytsubscribe.render(
     document.querySelector("#chan-2"),
     {
          "channel": "Apple", 
          "layout": "default",
          "count":"default",
          "onytevent":onYtEvent.bind(null,"Apple")
     }
   );
   function onYtEvent(channelName,payload) {
       console.log(channelName);
   }
   

您还可以使用api执行ajax请求来获取通道详细信息，其中应该包括通道名称，但由于您已经在代码中拥有了通道名称，因此我没有讨论该选项。通道API

Answer 2

您可以使用以下代码:

    var divs = $('div#chan-1').attr('id');

获取<div id="chan-1">的id。

JS Bin示例:http://jsbin.com/mazasegawu/edit?html,output