передача значения одному div от другого через jquery

Question

Я пытаюсь передать значение из одного div в другое.первый div генерируется a для каждого цикла и имеет условный оператор, который, если условие соответствует, значение передается второму 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 генерируется для каждого цикла, мне нужно различить read more.. ссылка, чтобы определить, на каком из читаемых объектов происходит щелчок, и передать соответствующий $str второму div.Можно ли передать значение через JQuery?или есть ли лучший способ сделать это?это может показаться странным, потому что я слаб в своих словах, но если кто-то понимает, о чем я говорю, помогите.

Answer 1

Возможно ли вам вместо этого выполнять манипулирование DOM через jQuery? Если это так, я бы рекомендовал перейти на следующий код:

$(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>

Я сделал скрипку здесь , если вы хотите, чтобы этот код работал. Документация для диалогов JQuery UI: здесь .

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>';

, а затем скрыть p с помощью css:

.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 для него здесь

Это должно сработать.