javascript - jQuery 的意外行为被隐藏并向下滑动

Question

我使用 jquery 来幻灯片放映和隐藏文本。使用下面的 css 代码隐藏文本，

.mainContent>.imageInfo:nth-child(1){
  display:none;
}
.mainContent>.imageInfo:nth-child(2)
{
   display:none;
}
.mainContent>.imageInfo:nth-child(3){
   display:none;
}
.mainContent>.imageInfo:nth-child(4){
   display:none;
}

悬停的元素应该显示该元素的左下角文本 block 。

 $( ".colContainer >  .mainContent:nth-child(n)" ).hover(function () {
       var $sel=$(".mainContent>.imageInfo:nth-child(" +( $(this).index() + 1)+")");


       if ( $sel.is( ":hidden" ) ) {
           $sel.slideDown( "slow" );console.log("hid");
        } else {
           $sel.hide();console.log("show");
        }
 });

但是，正如 gif 所示，当我将鼠标悬停在前两个元素上时没有任何反应，而当我将鼠标悬停在第三个元素上时，它应该会显示自己的文本；不过它会显示所有左下角的文本 block 。

代码， https://jsfiddle.net/Debra321/j9kkx4no/127/

欢迎和赞赏任何评论。

*我已经确认这不是由打字错误等微不足道的错误引起的。

我的观察是有 2 个问题:一个是 $sel.hide 被错误调用，即使该元素现在已经隐藏。二是第三项选择器以某种方式显示每个文本 block 。悬停时，console.log 打印消息。

Answer 1

如以下代码所述，这在 CSS 中最容易实现。

尽管适用于移动网站/应用程序；悬停不是很好的交互，因为您不能在手机上悬停。

它在 jQuery 中不起作用，因为 var $sel = $(".mainContent>.imageInfo:nth-child("+ ($(this).index() + 1) + ")");; nth-child 选择器应该位于 .mainContent 而不是 .imageInfo。

.imageInfo 将始终是 .mainContnet 中的第三个子级，这就是为什么只有当您将鼠标悬停在第三个图 block (index 是 2，nth-child 是 index+1，即 3)。

所以可以写成 var $sel = $(".mainContent:nth-child("+ ($(this).index() + 1) + ")>.imageInfo");

(function() {
  var dataObj =
    `{
        "widget": {
            "story": {
               "subtitle": "My",
               "maintitle": "Story",
               "desc": "A life as a daughter, sister and programer.",
               "image": "http://gdurl.com/USQR",
               "imageinfo":"Hsinchu",
               "spriteiconpos":"0 0",
               "url": "#"
           },
        "work": {
            "subtitle": "Working",
            "maintitle": "Experience",
            "desc": "Learning, Studying and Training.",
            "image": "http://gdurl.com/USQR",
            "imageinfo":"San Francisco",
            "spriteiconpos":"-80px 0",
            "url": "#"
        },
        "interests": {
            "subtitle": "Personal",
            "maintitle": "Interests",
            "desc": "Paint life with colors of interests.",
            "image": "http://gdurl.com/USQR",
            "imageinfo":"Quebec",
            "spriteiconpos":"0 -80px",
            "url": "#"
        },
        "goals": {
            "subtitle":"Future",
            "maintitle":"Goals",
            "desc": "Do not just survive.",
            "image": "http://gdurl.com/USQR",
            "imageinfo":"Quebec",
            "spriteiconpos":"-80px -80px",
            "url": "#"
        }
       }
     }`;
  var dataObj = $.parseJSON(dataObj);
  var dataArray = $.map(dataObj["widget"], function(value, index) {
    return [value];
  });
  var htmlCode = "";
  for (var i in dataArray) {
    var cssAttr = "";
    var cssSelect = "";
    //html
    htmlCode += "<div class='mainContent'>";
    htmlCode += "<div class='mainCol'>";
    htmlCode += "<h2>" + dataArray[i].subtitle + "</h2>";
    htmlCode += "<h1>" + dataArray[i].maintitle + "</h1>";
    htmlCode += "<p>" + dataArray[i].desc + "</p>";
    htmlCode += "</div>";
    htmlCode += "<i class='i-caretRight'></i>";
    htmlCode += "<div class='imageInfo'>" + dataArray[i].imageinfo + "</div>";
    htmlCode += "</div>";
    //css
    cssAttr = "background: url(http://gdurl.com/USQR) " + dataArray[i].spriteiconpos + "  no-repeat";
    cssSelect = ".colContainer >  .mainContent:nth-child(" + (parseInt(i) + 1) + "):before";
    var sheet = document.styleSheets[0];
    var rules = sheet.rules;
    document.styleSheets[0].addRule(cssSelect, cssAttr, rules.length);


  }
  $("#phoneContent .colContainer").html(htmlCode);
})();

@import url('https://fonts.googleapis.com/css?family=Allura|Habibi|Asar');
html {
  box-sizing: border-box;
}

body {
  background: #fcfca4;
  background: linear-gradient(to top right, #F3E9D2, #EC9192);
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
}

#phoneContent {
  position: absolute;
  top: 17.7%;
  left: 50px;
  width: 253px;
  height: 455px;
  display: block;
  margin: auto;
  overflow: hidden;
}

#mainPhoneContent {
  top: 0;
  height: 90%;
  position: relative;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  background: #c7c4be url(http://gdurl.com/ist4) repeat;
}

.phoneToolBar {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 10%;
  left: 0;
  background: black;
}

#phoneContent .colContainer {
  width: 100%;
  height: 110%;
  display: flex;
  top: 15%;
  flex-direction: column;
  position: absolute;
  background: white;
  -webkit-box-shadow: 4px 7px 50px 21px rgba(0, 0, 0, 0.41);
  -moz-box-shadow: 4px 7px 50px 21px rgba(0, 0, 0, 0.41);
  box-shadow: 4px 7px 50px 21px rgba(0, 0, 0, 0.41);
}

.colContainer>.mainContent {
  flex: 1;
  position: relative;
  background: #f1efe4;
  overflow: hidden;
  background: linear-gradient(to bottom, #f0f0e5, #e7e5da);
}

.mainContent>.imageInfo {
  position: absolute;
  left: 1%;
  bottom: -100%;
  width: 35%;
  height: 23%;
  text-align: center;
  font-family: Allura, serif;
  font-size: 1rem;
  color: black;
  transition: bottom linear 0.2s;
}

.mainContent:hover>.imageInfo {
  bottom: 1%;
}

.mainContent>.mainCol {
  left: 40%;
  width: 50%;
  height: 100%;
  position: absolute;
}

.mainCol>h2 {
  font-family: 'Habibi', serif;
  color: #ff7519;
  font-size: 1rem;
}

.mainCol>h1 {
  font-family: 'Habibi', serif;
  color: black;
  font-size: 1.5rem;
  margin-top: -12%;
}

.mainCol>p {
  margin-top: -10%;
  font-family: Georgia, serif;
  font-size: 0.7rem;
  font-style: italic;
  line-height: 1.45;
  color: #383838;
}

.colContainer>.mainContent:nth-child(n) {
  position: relative;
}

.colContainer>.mainContent:nth-child(n):hover {
  background: #ffffff;
  cursor: pointer;
}

.colContainer>.mainContent:nth-child(n):before {
  position: absolute;
  top: 5%;
  left: 2%;
  content: "";
  float: left;
  width: 80px;
  height: 80px;
}

.mainContent>i {
  position: absolute;
  content: "";
  right: 3%;
  top: 40%;
  width: 20px;
  height: 20px;
}

.mainContent>i:before {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 2px;
  background: #b8b7b0;
  content: "";
  transform-origin: right top;
  -ms-transform-origin: right top;
  /* IE 9 */
  -webkit-transform-origin: right top;
  /* Safari and Chrome */
  -moz-transform-origin: right top;
  /* Firefox */
  -o-transform-origin: right top;
  /* Opera */
  transform: rotate(-45deg);
}

.mainContent>i:after {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 2px;
  background: #b8b7b0;
  content: "";
  transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  /* IE 9 */
  -webkit-transform-origin: right bottom;
  /* Safari and Chrome */
  -moz-transform-origin: right bottom;
  /* Firefox */
  -o-transform-origin: right bottom;
  /* Opera */
  transform: rotate(45deg);
}

.st0 {
  fill: none;
  stroke: #FFFFFF;
  stroke-miterlimit: 10;
}

.st1 {
  fill: none;
  stroke: #DBDDDD;
  stroke-miterlimit: 10;
}

.st2 {
  fill: #FFFFFF;
}

.st3 {
  fill: none;
  stroke: #E5E5E5;
  stroke-miterlimit: 10;
}

.st4 {
  opacity: 0.3;
  fill: none;
  stroke: #FFFFFF;
  stroke-miterlimit: 10;
}

#myPhone {
  position: relative;
  width: 350px;
  height: 700px;
  display: block;
  margin: auto;
}

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

<body>
  <div id="myPhone">
    <div id="phonediv">
      <svg version="1.1" id="phone" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 500" style="enable-background:new 0 0 250 500;" xml:space="preserve">
     <g>
	       <path class="st0" d="M21,104.5c0,1.4-1.1,2.5-2.5,2.5l0,0c-1.4,0-2.5-1.1-2.5-2.5v-18c0-1.4,1.1-2.5,2.5-2.5l0,0
		c1.4,0,2.5,1.1,2.5,2.5V104.5z"/>
      	 <path class="st0" d="M21,143.5c0,1.4-1.1,2.5-2.5,2.5l0,0c-1.4,0-2.5-1.1-2.5-2.5v-18c0-1.4,1.1-2.5,2.5-2.5l0,0
		c1.4,0,2.5,1.1,2.5,2.5V143.5z"/>
	       <path class="st0" d="M21,182.5c0,1.4-1.1,2.5-2.5,2.5l0,0c-1.4,0-2.5-1.1-2.5-2.5v-18c0-1.4,1.1-2.5,2.5-2.5l0,0
		c1.4,0,2.5,1.1,2.5,2.5V182.5z"/>
     </g>
     <path class="st0" d="M200.5,23.3H53.7c-22.6,0-35.1,15.2-35.1,34.4v387.9c0,21.4,16.6,35.1,35.1,35.1h146.8
	c19.7,0,34.4-15.9,34.4-35.1V57.7C234.9,38.5,221.9,23.3,200.5,23.3z M217.6,414.6H35.1V87.2h182.5V414.6z"/>
     <path class="st0" d="M200.5,476.2H53.7c-14.7,0-30.6-11.7-30.6-30.6V57.7c0-17,13.2-29.9,30.6-29.9h146.8
	c16.7,0,29.9,13.1,29.9,29.9v387.9C230.4,461.6,216.1,476.2,200.5,476.2z M53.7,28.6c-17,0-29.9,12.5-29.9,29.1v387.9
	c0,20.4,17.8,29.9,29.9,29.9h146.8c15.2,0,29.1-14.2,29.1-29.9V57.7c0-16.3-12.8-29.1-29.1-29.1H53.7z"/>
     <circle class="st1" cx="127.1" cy="445.2" r="19.9"/>
         <g>
        	   <path class="st2" d="M127.1,427.1c10.4,0,18.9,8.5,18.9,18.9c0,10.4-8.5,18.9-18.9,18.9c-10.4,0-18.9-8.5-18.9-18.9
		C108.2,435.6,116.7,427.1,127.1,427.1 M127.1,426.1c-11,0-19.9,8.9-19.9,19.9c0,11,8.9,19.9,19.9,19.9c11,0,19.9-8.9,19.9-19.9
		C147,435,138.1,426.1,127.1,426.1L127.1,426.1z"/>
         </g>
         <path class="st3" d="M131.2,453.6h-9c-1.7,0-3-1.4-3-3v-9c0-1.7,1.4-3,3-3h9c1.7,0,3,1.4,3,3v9C134.2,452.3,132.9,453.6,131.2,453.6
	z M122.2,439.4c-1.2,0-2.3,1-2.3,2.3v9c0,1.2,1,2.3,2.3,2.3h9c1.2,0,2.3-1,2.3-2.3v-9c0-1.2-1-2.3-2.3-2.3H122.2z"/>
         <path class="st0" d="M146,50.5c0,1.4-1.1,2.5-2.5,2.5h-35c-1.4,0-2.5-1.1-2.5-2.5l0,0c0-1.4,1.1-2.5,2.5-2.5h35
	C144.9,48,146,49.1,146,50.5L146,50.5z"/>
        <line class="st4" x1="34.5" y1="87" x2="217" y2="87"/>
      </svg>
    </div>
    <div id="phoneContent">
      <div id="mainPhoneContent">
        <div class="colContainer">
        </div>
        <!--colContainer-->
      </div>
      <div class="phoneToolBar"></div>
    </div>
    <!--phoneContent-->
  </div>
</body>