Question

我正在使用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>

EDIT ::: 我刚刚使用谷歌浏览器检查了这个页面，可以看到同样的问题。到目前为止，它实际上只适用于Windows 10 Internet Explorer。任何人都可以帮我找到数据选项链接的替代品，因为它在选择框上显然不是很好......

Answer 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（由于select选项值也在发送spp_id，因此工作正常）。

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

我希望这可以帮助其他人。但是如果可能的话，我想打开这篇文章，以防任何人在下拉菜单中为Zurb的内置数据轨道链接功能提供解决方案。

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

1 个答案: