Jquery將字符串轉換爲對象

Question

我有一些代碼，我試圖將一個div的id值傳遞給一個函數，該函數然後淡出第一個div然後淡入第二個。我知道該函數接受對象，因爲當我試圖顯示給它的值$ alert（）時，我得到[Object object]。當單擊其中一個按鈕時，它將嘗試查找可見div的id，然後將其傳遞給fade函數，但它會找到id並將其保存在一個字符串中，我需要將其轉換爲對象。這裏是我的代碼：

<script type="text/javascript"> 
 
$(function() { 
 
    $('#step1').fadeIn("slow"); 
 
    $('#btn1').addClass("btn-primary active"); 
 
    
 
    $('#btn1').click(function() { 
 
    \t var id = $(".editor .steps").filter(function() { //this gets the value of the active div and saves it into id. 
 
\t \t if ($(this).css('display') == 'block') { 
 
\t \t \t return true; 
 
\t \t } 
 
\t }).attr('id'); 
 
\t fade(id, $('#step1')) //tyring to send id and the the step1 to the fade function 
 
    }); 
 
    
 
    $('#btn-step2-video').click(function() { 
 
     fade($('#step1'), $('#step2-video')); 
 
     $('#btn1').addClass("btn-primary"); 
 
     $('#btn2').addClass("btn-primary active"); 
 
    }); 
 

 
    $('#btn-step2-picture').click(function() { 
 
     fade($('#step1'), $('#step2-picture')); 
 
     btn2.addClass("btn-primary active"); 
 
    }); 
 
    
 
    var fade = function(fadeout, fadein){ 
 
    \t $(fadeout).fadeOut("slow"); 
 
     $(fadein).fadeIn("slow"); 
 
    } 
 
}); 
 
</script> 
 

 
Here is the HTML of the page: 
 

 
<!-- begin snippet: js hide: false -->

<div id="steps"> 
 
\t <button id="btn1" type="button" class="btn btn-primary btn-lg btn-step">1</button> 
 
\t <a class="btn-description">Choose type of ad</a> 
 
\t <button id="btn2" type="button" class="btn btn-primary btn-lg btn-step">2</button> 
 
\t <a class="btn">Confirmation &amp; Payment</a> 
 
</div> 
 

 
<!-- 
 
Begining of editor 
 
--> 
 

 
<div class="editor"> 
 

 
<!-- 
 
Step 1 of the editor 
 
--> 
 

 
<div id="step1" class="steps" style="display:none;" > 
 
\t <a id="btn-step2-video" style="position:fixed; top: 45%; left: 25%; cursor:pointer"><div class="btn-ad-choice ad-choice"> 
 
\t \t <br> 
 
\t \t <p><b>Create a video ad:</b></p> 
 
\t \t <video width="200" height="113" autoplay="autoplay" mute> 
 
\t \t \t <source src="video/exemple.mp4" type="video/mp4"> 
 
\t \t \t Your browser does not support the video tag. 
 
\t \t </video> 
 
\t </div></a> 
 
\t 
 
\t <a id="btn-step2-picture" style="position:fixed; top: 45%; right: 25%; cursor:pointer"><div class="btn-ad-choice ad-choice"> 
 
\t \t <br> 
 
\t \t <p><b>Create a picture ad:</b></p> 
 
\t \t <img src="images/adexemple.jpg" alt="Exemple of a picutre ad" height="113" width="200"> 
 
\t </div></a> 
 

 
</div> 
 

 
<!-- 
 
Step 2 for video of the editor 
 
--> 
 

 
<div id="step2-video" class="steps" style="display: none; height:400px; width:100%; background:gray"> 
 
\t video 
 
</div> 
 

 
<!-- 
 
Step 2 for pictures of the editor 
 
--> 
 

 
<div id="step2-picture" class="steps" style="display: none;"> 
 
\t picture 
 
</div> 
 

 
<!-- 
 
end of editor 
 
--> 
 
</div>

編輯

我編輯我的JavaScript來：

$('#btn1').click(function() { 
 
    \t fade($(".editor .steps:visible"), $('#step1')); //tyring to send id and the the step1 to the fade function 
 
    });

的建議：阿倫P約翰尼拉 感謝;）

Answer 1

jQuery對象接受一個選擇爲好，所以我可以看到的唯一問題是你沒有使用id selector，要傳遞的ID，並用它作爲一個element selector所以

fade('#'+id, $('#step1')) 

應該工作。

但是你可以通過使用visible selector到

$('#btn1').click(function() { 
    fade($(".editor .steps:visible"), $('#step1')) //tyring to send id and the the step1 to the fade function 
});