2015-04-17 2 views
0

Я не могу скрыть мой «целевой» div. Когда я изменяю div, чтобы спрятаться до «div1», он работает, но это не то, что я хочу. Может ли кто-нибудь понять, почему я не могу скрыть «целевой» div?JavaScript и скрытие div не работает

<html> 
<head> 
    <title>My sample</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

    <script type="text/javascript" language="javascript"> 


    $(document).ready(function() { 
     $("#hide").click(function(event){ 
      var ele = document.getElementById("target"); 
      ele.style.display = "none";      
     }); 
    });         

    //myItems.length 
    $(document).ready(function() { 
     $("#driver").click(function(event){ 
      $.getJSON('http://www.example.com/JSONV5.php', function(jd) { 
      var myItems = jd["items"]; 
       for (i = 0; i < 1; i++) { 
       $('#div1').append('<div id="target">'); 
       $('#div1').append('<p> Title: ' + jd["items"][i]["title"] + '</p>'); 
       $('#div1').append('<p> Description: ' + jd["items"][i]["description"] + '</p>'); 
       $('#div1').append('<p><img alt="" src=/uploads/' + jd["items"][i]["image1"] + '></p>'); 
       $('#div1').append('</div>');      
       }; 
      }); 
     }); 
    }); 
    </script> 

    </head> 
    <body> 
    <p>Click on the button to load result.html file:</p> 
    <div id="div1" style="background-color:#cc0;"> 
     DIV 1 
    </div> 

    <input type="button" id="driver" value="Load Data" /> 
    <input type="button" id="hide" value="Hide Data" /> 
    </body> 
</html> 
+0

Во-первых, вы добавляете элементы с идентификатором 'target' в цикле, а идентификаторы уникальны. Во-вторых, вы не можете разбивать элементы на вызовы 'append()', вам нужно вставить «целые» элементы, прямо сейчас вы *** скрываете первый элемент с идентификатором 'target', но этот элемент имеет нет детей. – adeneo

+0

Щелкните правой кнопкой мыши, проверьте элемент в DOM, и вы получите ответ! –

+0

Это, кстати, вопрос jQuery. – bruh

ответ

3

Вы не можете использовать append, как строку. Он не создает html, как вы думаете. Это добавление нескольких элементов, которые являются братьями и сестрами друг к другу. Во-вторых, у вас не может быть более одного элемента с тем же идентификатором.

$('#div1').append(
    '<div id="target">' + 
    '<p> Title: ' + jd["items"][i]["title"] + '</p>' + 
    '<p> Description: ' + jd["items"][i]["description"] + '</p>' + 
    '<p><img alt="" src=/uploads/' + jd["items"][i]["image1"] + '></p>' + 
    '</div>'); 
+0

Спасибо, миллион! , Вернуться к истокам. Я буду динамически создавать новый идентификатор. Я просто закодировал его, чтобы проверить. Еще раз спасибо за вход! – eddie

-1

Попробуйте

window.onload = function() { 

вместо

$(document).ready(function() { 

Вы также можете попробовать перенести этот

$("#hide").click(function(event){ 
    var ele = document.getElementById("target"); 
    ele.style.display = "none";     
}); 

после $("#driver").click(function(event){.

0

Вы $ .getJSON вызова() не возвращает никаких данных, и поэтому вы никогда не создавали DIV с идентификатором = "мишень"

вызов $ .getJSON() является erroring с: " В запрошенном ресурсе нет заголовка «Access-Control-Allow-Origin». Поэтому исходный «null» не имеет права доступа. В ответе был код статуса HTTP 404. «

Смежные вопросы