9

jqueryを使用して要素を作成しようとしています。リンクをクリックすると、要素「p」を作成し、テキストを入力して、divの1つに配置します。また、どのリンクがクリックされているかを確認したいので、作成した「p」を右のdivに配置できます。私が間違っているところに関する解決策はありますか？

Javascript / Jquery

$(document).ready(function () {

function createElement() {
  var a = $("#menu").find('a').each(function(){
    if(a == "l1"){
    var text = $(document.createElement('p');
    $('p').text("Hej");
    $("#contentl1").append("text");
    }
  });
}

$("#menu").find('a').each(function () {
    $(this).click(function () {
        createElement();
    });
});

createElement();

});

HTML

      <html>

<head>
<title>Inl1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style-1.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="Uppg1.js"></script>
</head>

<body>

<ul class="meny" id="menu">
<li><a href="#" id="l1">Utvärdering/Feedback</a></li>
<li><a href="#" id="l2">Kontakt</a></li>
<li><a href="#" id="l3">Öppettider</a></li>
<li><a href="#" id="l4">Om Asperöd</a></li>
</ul>

<div id="contentl1">

</div>

<div id="contentl2">

</div>

<div id="contentl3">

</div>

<div id="contentl4">

</div>

</body>

</html>
4

7 に答える 7

19

jQueryを使用<p>してテキスト"Hej"を含む新しい要素を追加する最良の方法は次のとおりです。#contentl1

$("<p />", { text: "Hej" }).appendTo("#contentl1");
于 2013-02-06T09:12:54.783 に答える
2 
function createElement() {
  var a = $("#menu").find('a').each(function(){
    if(a == "l1"){
    var p = $("<p>");
    p.text("Hej");
    $("#contentl1").append(p);
    }
  });
}
于 2013-02-06T09:12:05.330 に答える
1

あなたの質問に答えられないことはわかっていますが、これをコメントとして残すのは難しいです：

var a = $("#menu").find('a').each(function(){ <-- this "a" will only be created after the each completes
    if(a == "l1"){ <-- this "a" that you are verifying is a global variable
    var text = $(document.createElement('p');
    $('p').text("Hej");
    $("#contentl1").append("text");
    }
  });

問題を解決するためにこれを試すことができます：

function createElement() {
  if($(this).attr("id") == "l1"){
   $("#contentl1").append('<p>hej</p>');
  }
}

$("#menu a").each(function () {
    $(this).click(function () {
        createElement.apply(this);
    });
});
于 2013-02-06T09:12:37.897 に答える
1

まず、.find() を使用する代わりに、次のようにクリック機能を実行できます。

$('#menu a').click(function() { }

.each() ループは次のように実行できます。

$('#menu a').each(function () {
    var aId = $(this).attr('id');
    var contentId = content + aId;
    $(contentId).append('<p>Hej</p>');
})
于 2013-02-06T09:14:06.613 に答える
0

このスクリプトを試してみてください。テキストが正しい場所に配置されますdiv。

$(document).ready(function () {

$("#menu").find('a').each(function () {
    $(this).on('click',function () {
        $("#content"+$(this).attr("id")).append("<p>link "+$(this).attr("id")+" is clicked</p>");
    });
});


});
于 2013-07-26T10:07:16.650 に答える
0

このフィドルのようなもの？

$('#menu').on('click', 'a', function(e) {
    e.preventDefault();
    $('<p>').text($(this).text()).appendTo('#content'+this.id);
});
于 2013-02-06T09:32:10.663 に答える