Question

HTML

    <div class="new-product">
        <div class="col-md-5 zoom-grid">
            <div class="flexslider">
                <ul class="slides">
                     <li data-thumb="images/<?php echo $productimg1?>">
                        <div id="style_image" class="thumb-image" ><img  src="images/<?php echo $productimg1?>" data-imagezoom="true" class="img-responsive" alt="" /> </div>
                    </li>
                    <li data-thumb="images/<?php echo $productimg2?>">

                </ul>
            </div>
        </div>

我有这个html，其中图像来自使用php的数据库现在我需要用ajax

更改该图像

    <script>

function getState(val) {

    $.ajax({
    type: "POST",
    url: "check.php",
    data: {id: val},
    dataType:'json',
    success: function(data){
        $("#style_code").children().remove();
        $("#style_image").children().remove();
         data.option.forEach(function (item) {
                $("#style_code").append('<option value="' + item.color_name + '">' + item.size + '</option>');

                $('#style_image').append('<img  src="images/'+item.image_name+'" data-imagezoom="true" class="img-responsive" alt="" />')
            //$("#style_image").html(data);


            });

    }
    });
    }
</script>

check.php

        <?php 

$con=mysqli_connect("localhost","root","","ecommercedb") or die(mysql_error());


if(!empty($_POST["id"])) {
    $query ="SELECT * FROM stylecolor WHERE color_code = '" . $_POST["id"] . "'";       $results = mysqli_query($con,$query);
     while (($row = mysqli_fetch_object($results))) {
        $data->option[] = $row;

    }

}
      echo json_encode($data);
  ?>

它没有更改滑块上的图像，但是当我在其他地方调用它时它工作正常。我在1个下拉项目中使用2个函数，即。它会更改其他下拉选项和图像。

Answer 1

您应该使用style_image作为ID。像：

<div  id="style_image" class="thumb-image" >

NOT：

<div  #style_image class="thumb-image" >

Ajax图像不会改变下拉选择

1 个答案: