Question

编辑：问题是由一个装载不当的JQUERY图书馆造成的，一个问题没有在我的原始问题中清楚地说明。道歉。

我正在使用jquery隐藏，发布，然后将php查询的结果回显给两个单独的div。然后，我希望能够在这些div之间交换生成的图像。第一部分工作正常，但我无法获得任何其他jquery脚本来处理这些div（例如可排序，可放置等）。

我在过去几周内不再使用脚本了。我想在发送之前我需要json编码php的东西，但我在网上找不到如何做到这一点的明确指导。任何帮助都非常感激，无论是描述性的，引用特定的介绍资源（例如不是php.net），还是代码本身。

我在下面提供相关脚本。这个有效：

<script type='text/javascript'> 
$(document).ready(function(){ 
$("#search_results").slideUp(); 
    $("#search_button").click(function(e){ 
        e.preventDefault(); 
        ajax_search(); 
    }); 
    $("#search_term").keyup(function(e){ 
        e.preventDefault(); 
        ajax_search(); 
    });    
}); 

function ajax_search(){     
  $( "#search_results").show(); 
  var search_val = $("#search_term").val();
  var search_valb = $("#search_theme").val(); 
  $.post( "./find.php", {search_term : search_val, search_theme : search_valb}, function(data){
       if (data.length>0){ 
         $( "#search_results").html(data);  
         $( ".portfolio_container").hide();
         $( ".portfolio_draggables").hide();
         $( "ul.clickable_container li").click(function(){
             $( ".portfolio_draggables").hide();
             var activeImage = $(this).find("a").attr('href'); 
             $( ".portfolio_container").show();
             $( activeImage).show(); 
             return false;           
        });  

       };
   });
};
</script>

这是我正在使用的html表单。

<div id="lettersearchform" class = "lettersearchform">
        <form id="searchform" method="post">          
        <label for="search_term">Enter your word here!</label> 
        <input type="text" name="search_term[]" id="search_term" /> 
        <!--<input type="submit" value="search" id="search_button" />-->
        </form> 
</div>     

<div id="search_results"></div>

使用此脚本成功生成“search_results”：

$alpharray = array();
    while($row = mysqli_fetch_assoc($result)){      
        $alpharray[$row['letter']][] = $row;
    }

$first = $second = array();
foreach( str_split( $_POST['search_term']) as $alpha)
{ 
    $first[] = "<li><a href = '#$alpha'><img class='imgs_clickable_droppable' img src='../Letterproject/images/{$alpharray[$alpha][0]['photoPath']}' width='100' height='140'></src></a></li>";
    $editable = array("<div id='$alpha' class='portfolio_draggables'>");
    foreach ($alpharray[$alpha] as $tempvar)
    {                                              
         $editable[] = "<a href ='findall.php'><img src='../Letterproject/images/{$tempvar['photoPath']}' width='70' height='110'></src></a>";                                                         
    }   
    $editable[] = '</div>';
    $second[] = implode( '', $editable);
}

    echo '<ul id = "clickable" class="clickable_container">';
        echo implode( '', $first);
        echo '</ul>';


    echo '<div id="portfolio" class = "portfolio_container">';
        echo implode( '', $second);
    echo '</div>';

所以这就是问题进入的地方：这个可排序的脚本比我想要的cross-div更有限，但是这种类型的东西不起作用。

$(function() {

    $("ul.clickable li").draggable({
        containment: 'parent',
        revert: 'invalid',
        opacity: '0.91',
        cursor: 'crosshair'
    });
    $('.clickable').sortable();
});

对于那些对更多上下文感兴趣的人，我使用jquery来发布表单中的输入。 Php脚本匹配输入到mysql db中相应字母图像的字符。然后它将这些图像的列表回显到一个div，并将该字母的所有图像的整个组合回显到另一个div。这个想法是用户可以从第二个输出中拖动图像来替换另一个div中的字母图像。

非常感谢！

Answer 1

$("ul.clickable li")

未正确选择HTML id为clickable的元素和一类可点击的容器。更改元素的类（在jQuery / CSS中使用。选择）或id（使用＃选择）

$("#clickable")

应该有效。

此外，/ src是不必要的，因为src不是标签。直接在PHP脚本中编写HTML并不是最干净的方法。我强烈建议您查看Head First HTML/CSS或HF HTML5以增加您的理解。

将jquery应用于从php回显的元素

1 个答案: