jquery 将属性添加到在 appendTo 之前初始化后存储在变量中的元素

Question

在我当前的解决方案中，我定义了一个元素，然后解析了几个 if() 语句，这些语句用于向元素添加属性。我知道 create、appendTo、add attribute 的顺序不正确。那么有哪些选择

当前有效的解决方案，创建后添加 attr 初始化->appendTo->添加属性

var myElement=$('<img />',
                    {
                        id:'myId',
                    })

$("#myDiv").append(myElement);


if(myVar === "val1"){
     $("#myId").attr("src","img/img_01.png");
     $("#myId").attr("title","Platform");
}
if(myVar === "val2"){
         $("#myId").attr("src","img/img_02.png");
         $("#myId").attr("title","Speaker");
    }

不起作用，创建->添加属性->appendTo

 var myElement=$('<img />',
                    {
                        id:'myId',
                    })

if(myVar === "val1"){
     $("#myId").attr("src","img/img_01.png");
     $("#myId").attr("title","Platform");
}
if(myVar === "val2"){
         $("#myId").attr("src","img/img_02.png");
         $("#myId").attr("title","Speaker");
    }
$("#myDiv").append(myElement);

尝试添加到变量对象，不起作用

var myElement=$('<img />',
                        {
                            id:'myId',
                        })

if(myVar === "val1"){
         myElement["src"]="img/img_01.png";
         myElement["title"]="Platform";
    }

$("#myDiv").append(myElement);

Answer 1

@Doug 提到，您不能通过 ID select 一个元素，直到它存在于 DOM。

对于你创建的元素，你可以获得引用，然后改变它的属性，最后appendTo。

下面是一个工作示例，唯一的修改是将 $('#myID') 替换为 myElement。

function testAVal(myVar){
  var myElement=$('<img />',
                      {
                          id:'myId',
                      })

  if(myVar === "val1"){
       myElement.attr("src","img/img_01.png");
       myElement.attr("title","Platform");
  }
  if(myVar === "val2"){
           myElement.attr("src","img/img_02.png");
           myElement.attr("title","Speaker");
      }
  $("#myDiv").append(myElement);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="testAVal('val1')">A- TestVal1</button>
<button onclick="testAVal('val2')">A- TestVal2</button>
<div id="myDiv">
</div>

Answer 2

在你上次的尝试中，你非常接近。更改自：

myElement["src"]="img/img_01.png";

至：

myElement["attr"]("src","img/img_01.png");

var myVar = 'val2';
var myElement = $('<img />', {id: 'myId'});
if(myVar === "val1"){
    myElement["attr"]("src","img/img_01.png");
    myElement["attr"]("title","Platform");
}
if(myVar === "val2"){
    myElement["attr"]("src","img/img_02.png");
    myElement["attr"]("title","Speaker");
}

$("#myDiv").append(myElement);
console.log($("#myDiv")[0].outerHTML);




/*
ANOTHER WAY: ........
 var myElement = $('<img />', {
 id: 'myId',
 src: (myVar === "val1") ? "img/img_01.png" : (myVar === "val2") ? "img/img_02.png" : '',
 title: (myVar === "val1") ? "Platform" : (myVar === "val2") ? "Speaker" : ''
 })
 */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="myDiv"></div>

jquery 将属性添加到在 appendTo 之前初始化后存储在变量中的元素

jquery add attribute to element stored in a variable after initialisation before appendTo

javascript

jquery

attr