Ipad 上的 Zurb Orbit Slider 数据轨道链接答案

【问题标题】：Zurb Orbit Slider data-orbit-link on IpadIpad 上的 Zurb Orbit Slider 数据轨道链接
【发布时间】：2016-01-08 05:27:37
【问题描述】：

我正在使用 Zurb Foundation 和 Orbit 滑块在我的客户网站上显示产品图片。他要求当您从下拉列表中选择一个包时，它应该将图像更改为与该包相关的图像。所以他现在可以将图像链接到数据库中的包 ID，实际上这一切现在都可以在我的桌面上正常工作。但是在使用我的 Ipad 时，更改下拉框对图像没有任何影响。

谁能告诉我为什么？我该如何解决这个问题？由于我们的大多数客户实际上来自平板电脑和移动设备而不是桌面设备，因此目前这是一个真正的问题。

非常感谢

示例： http://www.bitandpiecesvape.co.uk/shop/atomisers-and-tanks/aspire-nautilus/

<!-- [ORBIT SLIDER] -->
<ul data-orbit data-options="navigation_arrows: false; timer: false">
                        <?php
                        $priceLinkArray = array();
                            for($i=0;$i<count($imageArray);$i++) {
                                if($imageArray[$i]["spp_id"] > 0) {
                                    $priceLinkArray[$imageArray[$i]["spp_id"]] = $i+1;  
                                }
                                echo '<li data-orbit-slide="headline-'.($imageArray[$i]["spp_id"]).'">';
                                echo '<a href="'.URL_ROOT.'img/uploads/products/'.$imageArray[$i]["pdi_path"].'" target="_new"><img src="'.URL_ROOT.'img/uploads/products/'.$imageArray[$i]["pdi_path"].'" style="margin: auto; max-height: 500px !important"></a>';
                                echo '</li>';   
                            }
                        ?>
                    </ul>
                    <ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4 product-img-thumb-slider">
                        <?php
                            for($i=0;$i<count($imageArray);$i++) {
                                echo '<li>
                                        <a data-orbit-link="headline-'.($imageArray[$i]["spp_id"]).'">
                                          <img src="'.URL_ROOT.'img/uploads/products/'.$imageArray[$i]["pdi_path_thumb"].'" style="height: 50px; border: 1px solid #eee; margin: auto !important">
                                        </a>
                                    </li>';
                            }
                        ?>
                    </ul>

<label><small>Product Package:</small>
                            <select id="productPriceOption" name="productPriceOption" onchange="updatePrice()">
                                <?php
                                for($i=0;$i<count($pricesArray);$i++) {
                                    if($i==0) $currentPrice = $pricesArray[$i]['spp_price'];
                                    if(isset($priceLinkArray[$pricesArray[$i]["spp_id"]])) {
                                        $linkPriceId = $pricesArray[$i]["spp_id"];
                                    } else {
                                        $linkPriceId = 1;
                                    }
                                    echo "<a data-orbit-link='headline-".$pricesArray[$i]['spp_id']."'>
                                            <option data-orbit-link='headline-".$pricesArray[$i]['spp_id']."' value='".$pricesArray[$i]['spp_id']."'>
                                                ".$pricesArray[$i]['spp_name']."
                                            </option>
                                            </a>";  
                                }
                                ?>
                            </select>
                        </label>

编辑::: 我刚刚使用谷歌浏览器检查了这个页面并且可以看到同样的问题。到目前为止，它实际上只适用于我在 Windows 10 Internet Explorer 上。谁能帮我找到 data-options-link 的替代方法，因为它在选择框上显然不是很好...

【问题讨论】：

标签： ipad drop-down-menu zurb-foundation orbit

【解决方案1】：

我已经使用一些 Jquery 解决了这个问题。我更改了以下内容：

<a data-orbit-link="headline-'.($imageArray[$i]["spp_id"]).'">

收件人：

<a data-orbit-link="headline-'.($imageArray[$i]["spp_id"]).'" id="headline-'.($imageArray[$i]["spp_id"]).'">

然后使用以下 Jquery，并将该方法应用于 Select OnChange（它工作正常，因为选择选项值也在发送 spp_id）。

function changeProductImage(value) {
if($('#headline-'+value).length > 0) {
    $('#headline-'+value).click();
}}

我希望这对其他人有所帮助。但如果可能的话，我想把这篇文章保持打开状态，以防有人可以在下拉菜单上为 Zurb 的内置数据轨道链接功能提供解决方案。

【讨论】：