Question

我的最终目标是，当我点击第一个地址图标它必须显示地址映射绑定到它Iframe与第二个绑定。我已成功将动态类添加到地址图标{{1}然后我也成功使用地址图标点击谷歌地图正在加载。主要问题是，无论是时间还是address，我都会获得地图位置Wink & Nod。我已通过更改Abhiruchi Mall循环中i值的值来更改for或0并更改小于条件，同时我改组了切换案例{{1 }或1。我99％成功，但点击两个图标加载相同的地图。当我点击第一个地址图标0时必须显示地图，当我点击第二个图标1时必须加载。目前他们在点击两个Icons.Thanks时加载相同的地址。

Shopify液体模板

Wink & Nod

JQuery Code onClick加载谷歌地图

Abhiruchi Mall

Answer 1

我已经重构了我的脚本，它就像魅力一样！

$('.address').click(function(){
   var j=$('.address').index(this);    
  switch (j) {            
                case 0 :
                 $('.embed-container, .maps').html('<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d945.7084267048235!2d73.8854388291583!3d18.536415399212462!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xdda3387f821de029!2sWink+%26+Nod!5e0!3m2!1sen!2sin!4v1525613363322" width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>'); 
                break;
                case 1 : 
                $('.embed-container, .maps').html('<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3784.450403270009!2d73.81459871445705!3d18.463246687442403!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bc2956a20fbac17%3A0x91987f7033fd2e3c!2sAbhiruchi+Mall+and+Multiplex!5e0!3m2!1sen!2sin!4v1525612885113" width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>'); 
                break;    
                default:
                $('.embed-container, .maps').html(' <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d945.7084267048235!2d73.8854388291583!3d18.536415399212462!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xdda3387f821de029!2sWink+%26+Nod!5e0!3m2!1sen!2sin!4v1525613363322" width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>'); 
                break;     
            }

  });

</script>

Shopify液体模板：点击在不同的地址图标上显示相同的地址

1 个答案: