Question

console.log('Grandma can jump'+this.vertical+'inches'); //remove first and last +

这是发布的Jobs div的javascript。它从firebaseDB中检索条目并显示文件夹

 <div> <h1>Posted Jobs</h1>   
  <div class="container gallery" id="Jobs" >

 </div>
</div>
<div class="Job applications" id="Application">
  <a>Applicants</a><br>
  <li class="entry" id="pos_1">
  </li>
</div>

然后我有另一个JavaScript函数

   firebase.auth().onAuthStateChanged((user) => {
  if (user) {
        database = firebase.database();

      var BusinessesId = firebase.auth().currentUser.uid;
      var ref = database.ref('/Jobs/');
    ref.on('value', JobData,  errData);

  }
  })
         function JobData(data) { 

              var container = document.getElementById('Jobs'); 

              data.forEach(function(JobSnap) { // loop over all jobs
                var key = JobSnap.key;
                var Jobs = JobSnap.val();
                var newCard = `
                       <div class="thumbnail" id="${key}">
                           <span class="folder"><span class="file"></span></span>
                           <div class="title" id="Jobs">${Jobs.JobTitle}</div>
                        </div>
                    `;
              container.innerHTML += newCard;
              console.log(key);
              })
            }

显示以此格式单击的各个文件夹的条目条目

这是我的点击处理程序

   function ApplicationData(data) { 

          // var ref = database.ref('/Applications/');
          //    ref.on('value', JobData,  errData);

              var container = document.getElementById('Application'); 

              data.forEach(function(applicationSnap) { // loop over all jobs
                var key = applicationSnap.key;
                var application = applicationSnap.val();
                var newCard = `

                  <li class="entry" id="${key}">
                       <a>
                        <aside>
                          <strong>${application.ApplicantName}</strong>
                          <p>${application.ApplicantNumber} ${application.Applicantemail}</p>

                        </aside>
                        <img src="http://i.imgur.com/lIkWmas.png"/>
                        <i></i>
                      </a>
                      <ul>
                        <li style="background-color:#246f41"></li><li style="background-color:#f57b20"></li><li style="background-color:#433e42"></li>
                      </ul>
                    </li>
                    `;

              container.innerHTML += newCard;
              // console.log(key);
              })
            }

我已经想出如何保存clicked元素的id。我需要做的是当单击一个文件夹时，我希望UI淡出文件夹并显示相应的应用程序。我该如何有效地做到这一点？

Answer 1

你可以使用$.fadeIn()和$.fadeOut()，你可以同时运行它们，或者如果你将一个作为回调传递给另一个，第二个只会在第一个运行时运行已经完成了。

＆＃13;

$('.one').fadeOut('fast',function() {
  $('.two').fadeIn('fast');
})

＆＃13;

.two {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 2

以下演示使用普通JavaScript在点击事件中使用<div>方法淡出多个classList.toggle()。

详情在演示中发表。

演示

/* Collect all div.box into a NodeList
|| then convert it into an array
*/
var boxes = Array.from(document.querySelectorAll('.box'));

// Use the .map() method and pass the array...
boxes.map(function(box, idx) {

  /* Assign an onclick event handler on each
  || .box. The callback (i.e. toggleFade()) is
  || a function that's called whenever the
  || event that's registered is fired.
  */
  box.onclick = toggleFade;
  return box;
});

// Declare the callback...
function toggleFade(e) {

  /* ...and use the classList.toggle() method 
  || to toggle the .fade class on and off
  */
  this.classList.toggle('fade');
}

main {
  width: 500px;
  height: 100px;
  outline: 3px dashed red;
}

.box {
  width: 50px;
  height: 100px;
  display: inline-block;
  outline: 1px solid gold;
  margin: 0;
  background: rgba(0, 0, 0, .7);
  color: gold;
  cursor: pointer;
  text-align: center;
  font-size: 20px;
  /*-----Required Styles-----*/
  /* Normally invisible */
  opacity: 0;
  /* This animates all animatable properties
  || with a duration of .75 seconds with an
  || ease timing function.
  */
  transition: all .75s ease;
}


/*-----Required Ruleset-----*/
.box.fade {
  /* Visible */
  opacity: 1;
  /* Same as above */
  transition: all .75s ease;
}

<p>Place your cursor within the red dashed outline and click.</p>
<main>
  <div class='box'>A</div>
  <div class='box'>B</div>
  <div class='box'>C</div>
  <div class='box'>D</div>
  <div class='box'>E</div>
  <div class='box'>F</div>
  <div class='box'>G</div>
  <div class='box'>H</div>
  <div class='box'>I</div>
</main>
<p>The .box(es) should alternate between fading in and out on each click.</p>

Javascript：你如何淡出一个div并显示另一个div？

2 个答案:

演示