Question

我试图将一个div的值传递给另一个div。第一个div由for循环生成，并且有一个条件语句，如果条件匹配，则将值传递给第二个div，并通过jquery弹出窗口显示第二个div。这是我的代码：

<?php foreach ($value as $data) {
?>
<div class="center">
    <h4>Description:</h4>
    <?php 
        if(strlen($data['description'])<50)
        {
            echo $data['description'];
        }
        else
        {
            $str=$data['description'];
            $substr=substr($str,0,50);
            echo $substr.'<p class=button><a href=#>read more...<a/><p/>';
    ?>
    <?php }?>
</div>
<?php }?>
<div class="popupContact">
    <a class="popupContactClose">x</a>
    <h1>Description</h1>
    <p class="contactArea">
        <?php echo $str;?>
    </p>
</div>
<div class="backgroundPopup"></div>

这是我的jquery popup

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
    //loads popup only if it is disabled
    if(popupStatus==0){
        $(".backgroundPopup").css({
            "opacity": "0.7"
        });
        $(".backgroundPopup").fadeIn("slow");
        $(".popupContact").fadeIn("slow");
        popupStatus = 1;
    }
}

//disabling popup with jQuery magic!
function disablePopup(){
    //disables popup only if it is enabled
    if(popupStatus==1){
        $(".backgroundPopup").fadeOut("slow");
        $(".popupContact").fadeOut("slow");
        popupStatus = 0;
    }
}

//centering popup
function centerPopup(){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $(".popupContact").height();
    var popupWidth = $(".popupContact").width();
    //centering
    $(".popupContact").css({
        "position": "absolute",
        "top": windowHeight/2-popupHeight/3.25,
        "left": windowWidth/2-popupWidth/2
    });
    //only need force for IE6

    $(".backgroundPopup").css({
        "height": windowHeight
    });

}


//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

    //LOADING POPUP
    //Click the button event!
    $(".button").click(function(){
        //centering with css
        centerPopup();
        //load popup
        loadPopup();
    });

    //CLOSING POPUP
    //Click the x event!
    $(".popupContactClose").click(function(){
        disablePopup();
    });
    //Click out event!
    $(".backgroundPopup").click(function(){
        disablePopup();
    });
    //Press Escape event!
    $(document).keypress(function(e){
        if(e.keyCode==27 && popupStatus==1){
            disablePopup();
        }
    });

});

现在，因为第一个div是针对每个循环生成的，所以我需要区分 read more.. 链接以确定单击哪个更多的读取并传递相应的 $str 到第二个div。是否可以通过jquery传递值？或者有更好的方法吗？这可能听起来令人困惑，因为我对自己的言论很虚弱，但如果有人明白我说的话请帮忙。

Answer 1

您是否可以通过jQuery进行DOM操作？如果是这样，我建议更改为以下代码：

$(document).ready(function () {
    $.each($value, function(index) {
        var desc = $value[index]["description"];
        var container = $('<div></div>').append('<h1>Description</h1>');
        if (desc.length < 50) {
            container.append(desc);
        } else {
            var anchor = $('<a href="#" class="button" onclick="return false;"></a>')
                //cache the rest of the description using .data()
                .data('desc', desc.substr(50, desc.length))
                .click(function () {
                    //using jQuery UI for a dialog
                    $('#genericDialog').html($(this).data('desc')).dialog();
                 })
                .text("Read more...").wrap('<p></p>');
            container.append(desc.substr(0, 50));
            container.append(anchor);
        }
        //append the container to the dom
        container.appendTo("#contactHolders");
    });
});

这是我使用的html：

<div id="contactHolders">
</div>
<div id="genericDialog"></div>

如果您希望看到此代码正常工作，我就制作了一个小提琴here。 jQuery UI对话框的文档是here。

Answer 2

最简单的方法之一就是将你的长篇文章保存在一个隐藏的块中，而你是在foreach中：

$str=$data['description'];
$substr=substr($str,0,50);
echo $substr.'<p class=button><a href=#>read more...<a/><p/>';
echo '<p class="full-desc">'.$str.'</p>';

然后使用css：

隐藏p

.full-desc{ display: none; }

并在javascript中检索值：

$(".button").click(function(){
    $(".contactArea").html($(this).next().text());
    //centering with css
    centerPopup();
    //load popup
    loadPopup();
});

Answer 3

如果我理解你的问题，当然有很多方法可以做到这一点。

一种解决方案是使用html 5数据属性传递一个值，该值标识所按的链接。

在您阅读的更多链接中，您可以添加：

<p class=button data-descriptionId = [PHP code to write the Id]><a href=#>read more...<a/><p/>

然后在jQuery中，您可以连接链接的单击事件，获取值并通过ajax调用加载内容。我无法看到您打算如何加载数据，但它看起来像这样：

$(document).ready(function(){

    $(".button").click(function(){
    event.preventDefault();
    var id = $(this).attr("data-decriptionId");

    //Make ajax call to the database see jQuery documentation for $.ajax passing inn the idvariable

});

    //set this as callback function to put the result in the second div

    function SetData(data){
    $(".contactArea").text(data); 
    }

});

为其执行ajax call se文档here

这应该有效。

通过jquery将值传递给另一个div

3 个答案: