Question

我的问题是：

当我点击图像旁边的每个按钮时，它会让我一直回到单个图像src。

我想要的是：

当我点击图像旁边的按钮时，它会给出该特定图像的src。这是我的代码，我将附加所有图像：

<section id="searchTutor">
 <div class="row">
 </div>
 </section>

现在，这里是jquery代码，它将图像附加到div

    $(document).ready(function() {
    $.ajax({
        url:'../php/allTutors.php',
        type:'GET',
        success:function(data)
        {
            var result = $.parseJSON(data);
            $.each(result, function(key, value){
                $.each(value, function(k, v){
                    var div_image = $('<div class="col-md-6 images"></div>');
                    var div_data = $('<div class="col-md-6 data"></div>');
                    if (k == 'image_path') {
                        var div = $(div_image).html("<br><img id='tutorImg' src="+v+" style='width:200px; height:250px; border:5px solid #F5F7FA; border-radius:15px;'/><br><br><br>");
                        $('#searchTutor .row').append(div);
                    }
                    if (k == 'name') {
                        var name = $(div_data).html("<h4>"+v+"</h4><span'><button id='viewTutor' class='btn btn-success'><i class='fa fa-user'></i> View Profile</button>&nbsp;&nbsp;&nbsp;<button class='btn btn-danger'><i class='fa fa-times'></i> Delete</button></span><hr>");
                        $('#searchTutor .row').append(name);
                        $('#searchTutor .row >.data:last').on('click', '#viewTutor', function(){

                        var imgPath=$(this).closest(".row").find('img',this).attr('src');
                        alert(imgPath);
                        // $.ajax({
                        //  url:'../php/imgPath.php',
                        //  type:'POST',
                        //  data:{'imgPath':imgPath},
                        //  success:function(data){
                        //      if (data === "Ok") {
                        //          window.location.replace('tutors-profile.html');
                        //      }
                        //  }
                        // })
                    }); 
                    }
                    if (k == 'about') {
                        var about = $(div_data).html("<label class='label label-info'>About</label>&nbsp;<label>"+ v +"</label>");
                        $('#searchTutor .row >.col-md-6:last').append(about);
                    }
                    if (k == 'contact_number') {
                        var number = $(div_data).html("<label class='label label-info'>Contact</label>&nbsp;<label>"+ v +"</label>");
                        $('#searchTutor .row >.col-md-6:last').append(number);
                    }
                    if (k == 'qualification') {
                        var qualification = $(div_data).html("<label class='label label-info'>qualification</label>&nbsp;<label>"+v+"</label>");
                        $('#searchTutor .row >.col-md-6:last').append(qualification);
                    }
                    if (k == 'location') {
                        var location = $(div_data).html("<label class='label label-info'>Location</label>&nbsp;<label>"+ v +"</label>");
                        $('#searchTutor .row >.col-md-6:last').append(location);
                    }
                    if (k == 'board') {
                        var board = $(div_data).html("<label class='label label-info'>Board</label>&nbsp;<label>"+ v +"</label>");
                        $('#searchTutor .row >.col-md-6:last').append(board);
                    }
                    if (k == 'class') {
                        var classes = $(div_data).html("<label class='label label-info'>Class</label>&nbsp;<label>"+ v +"</label>");
                        $('#searchTutor .row >.col-md-6:last').append(classes);
                    }
                });
});
}

    })
    });

这里我的PHP代码是从数据库中获取数据

    <?php
require_once 'database.php';
$data = array(); 
$stmt = $db->query("SELECT * FROM tutors");
$row = $stmt->fetchall(PDO::FETCH_ASSOC);
foreach($row as $key => $value) {
    $data[$key] = $value;
}
$result = json_encode($data);
echo $result;

Answer 1

我使用 find（img）在 div_data 中找到 img .. 在 div_image 中找到相同的东西之后，我得到了答案。这是正确的代码..

   $(document).ready(function() {
    $.ajax({
        url:'../php/allTutors.php',
        type:'GET',
        success:function(data)
        {
            var result = $.parseJSON(data);
            $.each(result, function(key, value){
                $.each(value, function(k, v){
                    var div_image = $('<div class="col-md-6 images"></div>');
                    var div_data = $('<div class="col-md-6 data"></div>');
                    if (k == 'image_path') {
                        var div = $(div_image).html("<br><img id='tutorImg' src="+v+" style='width:200px; height:250px; border:5px solid #F5F7FA; border-radius:15px;'/><button id='imgBtn' class='btn btn-success'><i class='fa fa-user'></i> View Profile</button><button id='imgBtn' class='btn btn-danger'><i class='fa fa-times'></i> Delete</button><br><br><br>");
                            $('#searchTutor .row').append(div);
                            $('#searchTutor .row >.images:last').on('click', '#imgBtn', function(){
                            var imgPath=$(this).parent().find('img').attr('src');
                            alert(imgPath);
                        });
                        }
                        if (k == 'name') {
                            var name = $(div_data).html("<h4>"+v+"</h4><span'><button id='viewTutor' class='btn btn-success'><i class='fa fa-user'></i> View Profile</button>&nbsp;&nbsp;&nbsp;<button class='btn btn-danger'><i class='fa fa-times'></i> Delete</button></span><hr>");
                            $('#searchTutor .row').append(name);

                    }
                    if (k == 'about') {
                        var about = $(div_data).html("<label class='label label-info'>About</label>&nbsp;<label>"+ v +"</label>");
                        $('#searchTutor .row >.col-md-6:last').append(about);
                    }
                    if (k == 'contact_number') {
                        var number = $(div_data).html("<label class='label label-info'>Contact</label>&nbsp;<label>"+ v +"</label>");
                        $('#searchTutor .row >.col-md-6:last').append(number);
                    }
                    if (k == 'qualification') {
                        var qualification = $(div_data).html("<label class='label label-info'>qualification</label>&nbsp;<label>"+v+"</label>");
                        $('#searchTutor .row >.col-md-6:last').append(qualification);
                    }
                    if (k == 'location') {
                        var location = $(div_data).html("<label class='label label-info'>Location</label>&nbsp;<label>"+ v +"</label>");
                        $('#searchTutor .row >.col-md-6:last').append(location);
                    }
                    if (k == 'board') {
                        var board = $(div_data).html("<label class='label label-info'>Board</label>&nbsp;<label>"+ v +"</label>");
                        $('#searchTutor .row >.col-md-6:last').append(board);
                    }
                    if (k == 'class') {
                        var classes = $(div_data).html("<label class='label label-info'>Class</label>&nbsp;<label>"+ v +"</label>");
                        $('#searchTutor .row >.col-md-6:last').append(classes);
                    }
                });
});
}
})
});

使用JQUERY获取动态附加图像的个性化src时遇到麻烦

1 个答案: