jQuery的：選擇不一致，可有人請解釋我在做什麼錯在這裏

爲什麼這項工作：jQuery的：選擇不一致，可有人請解釋我在做什麼錯在這裏

$("div.cat_rollout").mouseover(function(){ 
    $(this).removeClass().addClass("cat_rollover"); 
    $(this).animate({ fontSize: "22px" }, 'fast'); 
}).mouseout(function(){ 
    $(this).removeClass().addClass("cat_rollout"); 
    $(this).animate({ fontSize: "10px" }, 'fast'); 
});

但這並不：

$('.vpMedia').click(function() { 

    var selectedBT1 = $(this).find(".vpLeft"); 
    selectedBT1.removeClass(); 
    selectedBT1.addClass("vpLeft_Selected"); //doesn't work 

    var selectedBT2 = $(this).find(".vpLeftText"); 
    selectedBT2.removeClass(); 
    selectedBT2.addClass("vpLeftText_Selected"); //doesn't work 

    $(this).find(".vpArrow").css("visibility", "visible"); //works 
});

唯一的區別是，我」通過查找引用孩子。

如果我做上面的代碼，但變化：

 var selectedBT2 = $(this).find(".vpLeftText"); 
    selectedBT2.removeClass(); 
    selectedBT2.addClass("vpLeftText_Selected");

要只是改變CSS：

 var selectedBT2 = $(this).find(".vpLeftText"); 
    selectedBT2.css("color", "#f00");

它的工作原理。因此，有話跟我做一個雙重的jQuery（removeClass和addClass）

下面是一些HTML：

<div class="vpWrapper"> 
    <div class="vpMedia"> 
     <a href="1.mp4" bitly="BITLY_PROCESSED"> 
      <div class="vpArrow" style="visibility: visible; "> 
       <img src="vpArrow.png" width="12" height="14"> 
      </div> 
      <div class="vpLeftWrapper"> 
       <div class="vpLeftText_Selected">Blah</div> 
       <div class="vpLeft_Selected"></div> 
      </div> 
      <div class="vpRight"> 
       <div class="vpRightImg"> 
        <img src="1-preview.png" width="137" height="77"> 
       </div> 
      </div> 
     </a> 
    </div> 
    <div class="vpMedia"> 
     <a href="2.jpg" bitly="BITLY_PROCESSED"> 
      <div class="vpArrow"> 
       <img src="vpArrow.png" width="12" height="14"> 
      </div> 
      <div class="vpLeftWrapper"> 
       <div class="vpLeftText" style="color: rgb(170, 170, 170); ">Blah</div> 
       <div class="vpLeft" style="opacity: 0; "></div> 
      </div> 
      <div class="vpRight"> 
       <div class="vpRightImg"> 
        <img src="2-preview.png" width="137" height="77"> 
       </div> 
      </div> 
     </a> 
    </div> 
    <div class="vpMedia"> 
     <a href="3.jpg" bitly="BITLY_PROCESSED"> 
      <div class="vpArrow" style="visibility: visible; "> 
       <img src="vpArrow.png" width="12" height="14"> 
      </div> 
      <div class="vpLeftWrapper"> 
       <div class="vpLeftText_Selected" style="color: rgb(0, 204, 0); ">Blah</div> 
       <div class="vpLeft_Selected" style="opacity: 0.2; "></div> 
      </div> 
      <div class="vpRight"> 
       <div class="vpRightImg"> 
        <img src="3-preview.png" width="137" height="77"> 
       </div> 
      </div> 
     </a> 
    </div> 
    <div class="vpMedia"> 
     <a href="4.jpg" bitly="BITLY_PROCESSED"> 
      <div class="vpArrow"> 
       <img src="vpArrow.png" width="12" height="14"> 
      </div> 
      <div class="vpLeftWrapper"> 
       <div class="vpLeftText">Blah</div> 
       <div class="vpLeft"></div> 
      </div> 
      <div class="vpRight"> 
       <div class="vpRightImg"> 
        <img src="4-preview.png" width="137" height="77"> 
       </div> 
      </div> 
     </a> 
    </div> 
    <div class="vpMedia"> 
     <a href="5.jpg" bitly="BITLY_PROCESSED"> 
      <div class="vpArrow"> 
       <img src="vpArrow.png" width="12" height="14"> 
      </div> 
      <div class="vpLeftWrapper"> 
       <div class="vpLeftText">Blah</div> 
       <div class="vpLeft"></div> 
      </div> 
      <div class="vpRight"> 
       <div class="vpRightImg"> 
        <img src="5-preview.png" width="137" height="77"> 
       </div> 
      </div> 
     </a> 
    </div> 
    <div class="vpMedia"> 
     <a href="6.jpg" bitly="BITLY_PROCESSED"> 
      <div class="vpArrow"> 
       <img src="vpArrow.png" width="12" height="14"> 
      </div> 
      <div class="vpLeftWrapper"> 
       <div class="vpLeftText">Blah</div> 
       <div class="vpLeft"></div> 
      </div> 
      <div class="vpRight"> 
       <div class="vpRightImg"> 
        <img src="6-preview.png" width="137" height="77"> 
       </div> 
      </div> 
     </a> 
    </div> 
    <div class="vpMedia"> 
     <a href="7.jpg" bitly="BITLY_PROCESSED"> 
      <div class="vpArrow"> 
       <img src="vpArrow.png" width="12" height="14"> 
      </div> 
      <div class="vpLeftWrapper"> 
       <div class="vpLeftText">Blah</div> 
       <div class="vpLeft"></div> 
      </div> 
      <div class="vpRight"> 
       <div class="vpRightImg"> 
        <img src="7-preview.png" width="137" height="77"> 
       </div> 
      </div> 
     </a> 
    </div> 
</div>

編輯：按照要求，CSS

.vpWrapper { 
    width:286px; 
    overflow-x: visible; 
} 

.vpMedia { 
    margin: 0; 
    padding: 0; 
    background-color: fuchsia; 
} 

.vpArrow { 
    height: 69px; 
    width:12px; 
    padding-top: 8px; 
    float: left; 
    visibility: hidden; 
} 

.vpLeftWrapper { 
    position: relative; 
    float: left; 
    background-color: white; 
    width:137px; 
    height: 77px; 
} 
.vpLeft { 
    position: absolute; 
    top:0; 
    left: 0; 
    z-index: 788; 
    float: left; 
    background-color: #00cc00; 
    width:121px; 
    height: 61px; 
    padding: 8px; 
    -moz-opacity:0; 
    -ms-filter:'alpha(opacity=0)'; 
    filter:alpha(opacity=0); 
    opacity:0; 
} 

.vpLeft_Selected { 
    position: absolute; 
    top:0; 
    left: 0; 
    z-index: 788; 
    float: left; 
    background-color: #00cc00; 
    width:121px; 
    height: 61px; 
    padding: 8px; 
} 

.vpLeftText { 
    position: absolute; 
    top:0; 
    left: 0; 
    z-index: 789; 
    width:121px; 
    height: 61px; 
    padding: 8px; 
} 

    .vpLeftText_Selected { 
     position: absolute; 
     top:0; 
     left: 0; 
     z-index: 789; 
     width:121px; 
     height: 61px; 
     padding: 8px; 
     color: white; 
    }

來源

2010-07-29 RGBK

你可以張貼一些HTML？ – hunter 2010-07-29 16:43:08

另外，請解釋什麼「不工作」需要:) – 2010-07-29 17:13:58

哈哈，以及它不會刪除類，然後添加新的類。它確實刪除它，如果我只是說這（如第一個代碼示例中看到的），但它的下一個樣品中不（僅僅是因爲我問了jQuery .find（）內$的東西（這））。我真的不明白！我的意思是爲什麼不呢。很好理解爲什麼它不起作用。 – RGBK 2010-07-29 17:22:32

我使用Chrome的開發人員工具來測試您的代碼，並且該類正在被正確添加。這讓我覺得你的css類定義有問題。這些是什麼樣的？它完全工作時，我用這個CSS測試它：

.vpLeftText_Selected {color:#0f0;}

來源

2010-07-29 17:28:14 rosscj2533

難道有事可做的事實，我有一個懸停（）函數（通過的CSS（改變CSS），但不是通過removeClass（）。addClass（）？我的意思是，其實，事情CSS變化的作品，只是沒有removeClass（）addClass（），可能是這不影響它 – RGBK 2010-07-29 17:35:20

我們取得了一些哈弗（）與點擊衝突（） – RGBK 2010-07-29 17:46:03

@RGBK - 。我不認爲'hover'函數會有效果，你發佈的html沒有'cat_rollout' div，所以我的測試沒有包括這個。使用Chrome的開發工具我可以看到'removeClass'和'addClass'正在工作，爲什麼我想知道什麼'vpLeft_Selected'和'vpLeftText_Selected'你的CSS類定義看起來像你能不能公佈這些 – rosscj2533 2010-07-29 17:48:21

事實證明，懸停功能與點擊衝突。但實際上只使用removeClass（）。addClass（）行（？） .css（）部分起作用。

我怎樣才能解決這個優雅得到什麼？

$('.vpMedia').hover(function() { 
    $(this).find(".vpLeft").css("opacity" , "0.2"); 
    $(this).find(".vpLeftText").css("color" , "#00cc00"); 
    }, 
    function() { //mouseout 
    $(this).find(".vpLeft").css("opacity" , "0"); 
    $(this).find(".vpLeftText").css("color" , "#aaa"); 
}); 

$('.vpMedia').click(function() { 

    var selectedBT1 = $(this).find(".vpLeft"); 
    selectedBT1.removeClass(); 
    selectedBT1.addClass("vpLeft_Selected"); //if i remove the hover function above, this works. 

    var selectedBT2 = $(this).find(".vpLeftText"); 
    selectedBT2.removeClass(); 
    selectedBT2.addClass("vpLeftText_Selected");//if i remove the hover function above, this works. 

    $(this).find(".vpArrow").css("visibility", "visible");//but this works regardless?! 
});

來源

2010-07-29 17:47:53 RGBK

在您使用的原始代碼中，您是否嘗試在懸停功能期間向「vpLeft」和「vpLeftText」div添加類？ – rosscj2533 2010-07-29 18:12:56

是的，懸停在vpMedia上從2個div中移除vpLeft和vpLeftText類，並用新的類替換它們（但是隻有在懸停時，只要你出去，它們就會通過相同的方法返回到它們原來的類狀態。 – RGBK 2010-07-29 18:22:50

看起來這個代碼非常有用，因爲你在懸停中使用'css'，這些樣式將優先於你添加的任何類，所以如果你在'vpLeft_Selected'中查找的樣式是由' .css'的調用，它不會在那裏，你是什麼樣的風格，你錯過了onclick？ – rosscj2533 2010-07-29 18:28:35

jQuery的：選擇不一致，可有人請解釋我在做什麼錯在這裏

回答

相關問題