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

Question

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

<?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 弹出窗口

//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 是从 for each 循环中生成的，我需要区分 read more.. 链接以确定单击了哪个 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 中，您可以为链接连接 clicked 事件，获取值并通过 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调用se文档here

应该可以的。