Question

我有一些代码，我试图将div的id值传递给一个函数，然后该函数淡出第一个div然后淡入第二个div。我知道该函数接受了对象，因为当我尝试使用$ alert（）显示给它的值时，我得到了[Object object]。当单击其中一个按钮时，它将尝试找到可见的div的id，然后将其传递给fade函数，但是它找到id并将其保存在字符串中，我需要将其转换为对象。这是我的代码：

＆＃13;

<script type="text/javascript">
$(function() {
  $('#step1').fadeIn("slow");
  $('#btn1').addClass("btn-primary active");
 
  $('#btn1').click(function() {
  	var id = $(".editor .steps").filter(function () { //this gets the value of the active div and saves it into id.
		if ($(this).css('display') == 'block') {
			return true;
		}
	}).attr('id');
	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){
 	  $(fadeout).fadeOut("slow");
      $(fadein).fadeIn("slow");
  }
});
</script>

Here is the HTML of the page:

<!-- begin snippet: js hide: false -->

＆＃13;

<div id="steps">
	<button id="btn1" type="button" class="btn btn-primary btn-lg btn-step">1</button> 
	<a class="btn-description">Choose type of ad</a>
	<button id="btn2" type="button" class="btn btn-primary btn-lg btn-step">2</button>
	<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;" >
	<a id="btn-step2-video" style="position:fixed; top: 45%; left: 25%; cursor:pointer"><div class="btn-ad-choice ad-choice">
		<br>
		<p><b>Create a video ad:</b></p>
		<video width="200" height="113" autoplay="autoplay" mute>
	  		<source src="video/exemple.mp4" type="video/mp4">
			Your browser does not support the video tag.
		</video>
	</div></a>
	
	<a id="btn-step2-picture" style="position:fixed; top: 45%; right: 25%; cursor:pointer"><div class="btn-ad-choice ad-choice">
		<br>
		<p><b>Create a picture ad:</b></p>
		<img src="images/adexemple.jpg" alt="Exemple of a picutre ad" height="113" width="200">
	</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">
	video
</div>

<!-- 
Step 2 for pictures of the editor
-->

<div id="step2-picture" class="steps" style="display: none;">
	picture
</div>

<!--
end of editor
-->
</div>

＆＃13;

修改

我将我的javascript编辑为：

＆＃13;

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

＆＃13;

建议：Arun P Johny 谢谢;）

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
});

Jquery将字符串转换为Object

1 个答案: