点击另一个DIV重新加载DIV

时间:2015-09-29 06:35:15

标签: javascript jquery html css

我有一个名为dataGridView.DataSource = null; dataGridView.DataSource = listOfSomething; 的div,在pip install python-gsmmodem pip install simplesms from gsmmodem.modem import GsmModem from simplesms import pdu as gsmpdu PORT = '/dev/ttyUSB0' #Port your gsm modem is connected to. PIN = None # SIM card PIN (if any) BAUDRATE = 115200 USSD_STRING = '*140*11#' modem = GsmModem(PORT, BAUDRATE) modem.connect(PIN) modem.waitForNetworkCoverage(10) #encode ussd string encoded_ussd_strint = gsmpdu.encode(USSD_STRING) #send encoded ussd string response = modem.sendUssd(encoded_ussd_strint) #decode encoded ussd response decoded_response = gsmpdu.decode(response.message) print 'USSD reply received: {0}'.format(decoded_response) if response.sessionActive: print 'Closing USSD session.' # At this point, you could also reply to the USSD message by using response.reply() response.cancel() else: print 'USSD session was ended by network.' 内还有3个其他masterdiv divdivdiv1,< / p>

这是div2的{​​{1}}:

div3

我还有另一个html

html

我要做的是在每次点击<div id="masterdiv" class="masterdivclass"> <div id="div1"><img class="div1class" src="image1.jpg" id="div1id" /></div> <div id="div2"><img class="div2class" src="image2.jpg" id="div2id" /></div> <div id="div3"><img class="div3class" src="image3.jpg" id="div3id" /></div> </div> div时重新加载div div。隐藏然后显示div是不够的,因为我需要在单击<div id=”reload”><img src="reload.png" width="200" height="70" onclick=loadDIV();></div> div时重新加载内容。我不想重新加载整个页面,只包含masterdiv,其中包含另外3个reload。但我不确定这是可能的。

我正在尝试使用这个Javascript函数:

refresh

这不起作用,我想也许我会以错误的方式解决这个问题?也许我在这里错过了一些非常简单的东西?我真的很感激你的帮助,提前谢谢你!

更新

在重新考虑我的项目要求后,我需要更改部分问题,我现在需要将div中显示的图像随机化,并在每次masterdiv div时加载新的随机图像点击。我还需要删除当前在三个div中的每一个的每个类,然后将相同的类重新附加到div(如果我不删除并重新附加类,则div只显示普通图像而不应用任何类/效果它们,似乎我每次将图像加载到div中时都需要重新加载类,以便成功应用类/效果)。

我有5张图片,我正在使用每个div的div标记将随机图像附加到每个div。

首先,我将5个不同的图像分配给5个不同的ID:

<script type="text/javascript">
       function loadDiv(){
       $("<div id="masterdiv" class="masterdivclass">

        <div id="div1"><img class="div1class" src="image1.jpg" id="div1id" /></div>

        <div id="div2"><img class="div2class" src="image2.jpg" id="div2id" /></div>

        <div id="div3"><img class="div3class" src="image3.jpg" id="div3id" /></div>

</div>").appendTo("body");
       }
    </script>

然后我尝试使用以下Javascript在点击reload div时将随机ID(及其指定的图像)加载到3个div中的每一个:

id

我正在尝试使所有3个div显示相同的随机图片(这就是为什么他们都共享变量“variablesample”),每个div将重新加载自己的类/效果({{1 }},<script> document.getElementById('sample1').src="images/00001.jpg"; document.getElementById('sample2').src="images/00002.jpg"; document.getElementById('sample3').src="images/00003.jpg"; document.getElementById('sample4').src="images/00004.jpg"; document.getElementById('sample5').src="images/00005.jpg"; </script> reload)但它不起作用。我不确定在Javascript函数中使用jQuery是否正确,或者我更新div的id的语法是否正确。

也许我解决这个问题的逻辑是错的?我真的很感激这个问题的帮助。再次感谢您!

4 个答案:

答案 0 :(得分:2)

为了后人的缘故,我将把所有编辑的所有答案留给原来的问题。我希望我们最终能够找到正确的问题......? :)

第一个答案(使用.detach()来“重新加载”元素):jsfiddle demo

第二个答案(随机课,如要求):jsfiddle demo

第三个答案(随机图像,但所有3个和3个开/关切换时的相同图像):jsfiddle demo

$(function() {
    var imageArray = [
        'https://placehold.it/40x40',
        'https://placehold.it/80x40',
        'https://placehold.it/120x40',
        'https://placehold.it/160x40',
        'https://placehold.it/200x40'];
    reloadImages(imageArray);
    $('#reload').on('click',function(){
        $( "#masterdiv img[id^='div']" ).each(function(index){
            $(this).removeClass("div"+(index+1)+"class");
            $(this).fadeOut( "slow", function() {
                if(index==0) {
                    reloadImages(imageArray);
                }
                $(this).addClass("div"+(index+1)+"class");
                $(this).fadeIn();

            });
        });
    });
});


function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

function reloadImages(array){
    shuffleArray(array);
    for(var i=0;i<3;i++){
        // places the first image into all divs, change 0 to i if you want different images in each div
        document.getElementById('div'+(i+1)+'id').src=array[0];
    }
}
.div1class {
    border:2px dashed #0F0;
}
.div2class {
    border:2px dashed yellow;
}
.div3class {
    border:2px dashed red;
}
#reload {
    background-color:blue;
    width:100px;
    height:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id='reload'>Click here</div>

<div id="masterdiv" class="masterdivclass">
    <div id="div1">
        <img src="https://placehold.it/20x40" class="div1class" id="div1id" />
    </div>
    <div id="div2">
        <img src="https://placehold.it/20x40" class="div2class" id="div2id" />
    </div>
    <div id="div3">
        <img src="https://placehold.it/20x40" class="div3class" id="div3id" />
    </div>
</div>

答案 1 :(得分:1)

尝试:

function loadDiv(){

    $("#masterdiv").load(location.href + " #masterdiv");

}

这是代码笔演示: http://codepen.io/anon/pen/xwgRWm

答案 2 :(得分:1)

  

如果没有动态更改容器的内容,则无需重新加载它。 appendToDOM添加到现有DOM structure中,您需要html(),这将取代容器内的内容。另请注意,您在此处输入错误onclick=loadDiv();

<强> HTML:

<div id="masterdiv" class="masterdivclass">

    <div id="div1"><img class="div1class" src="image1.jpg" id="div1id"/></div>

    <div id="div2"><img class="div2class" src="image2.jpg" id="div2id"/></div>

    <div id="div3"><img class="div3class" src="image3.jpg" id="div3id"/></div>

</div>
<div id="reload"><img src="reload.png" width="200" height="70" onclick=loadDiv();></div>

<强> JS:

function loadDiv() {
    $("#masterdiv").html('<div id="div1"><img class="div1class" src="image1.jpg" id="div1id" /></div>\
            <div id="div2"><img class="div2class" src="image2.jpg" id="div2id" /></div>\
            <div id="div3"><img class="div3class" src="image3.jpg" id="div3id" /></div>');
}

答案 3 :(得分:1)

换行符和未转义的引号是函数无效的原因。

function loadDiv(){
    $('#masterdiv').remove();
    $("<div id='masterdiv' class='masterdivclass'><div id='div1'><img class='div1class' src='image1.jpg' id='div1id' /></div><div id='div2'><img class='div2class' src='image2.jpg' id='div2id' /></div><div id='div3'><img class='div3class' src='image3.jpg' id='div3id' /></div></div>").appendTo("body");
}
相关问题