JQuery - 父母 - 優文庫

我想在父項中顯示「OPEN」或「CLOSED」（取決於條件），但我不知道如何執行此操作。此代碼使兩個<h2>標題作爲下拉列表工作。我想要函數傳遞參數，如果它不等於1，我想在<h2>的<span>中顯示OPEN。JQuery - 父母

的Javascript

<script type="text/javascript"> 
    var a = null; 
    var b = null; 
    var c = 1; 
    $(document).ready(function() { 
     $(".toggle_container").hide(); 
     $("h2.trigger").click(function() { 
      $(this).toggleClass("active").next().slideToggle("slow"); 
     }); 
    }); 
    function divide(a, b) { 
     (a/b != c) ? 
     // Where help is needed 
     // $(this).parent(".status").text("OPEN").css("color", "green") : 
     // $("team").parent(".status").text("CLOSED").css("color","red"); 
     document.write(a + "/" + b); 
    } 
</script>

HTML

<body> 
    <div class="tournaments"> 
    <h2 class="trigger">Tournament 1<span class="status"></span></h2> 
     <div class="toggle_container"> 
      <div class="block"> 
       <h3>Details</h3> 
       <p>Deadline: DATE</p> 
       <p>Teams: <span class="team"><script type="text/javascript">divide(3, 7)</script></span> 
       </p> 
      </div> 

     </div> 
     <h2 class="trigger">Tournament 2 <span class="status"></span></h2> 
     <div class="toggle_container"> 
      <div class="block"> 
       <h3>Details</h3> 
       <p>Deadline: DATE</p> 
       <p>Teams: <span class="team"><script type="text/javascript">divide(3,7)</script></span> 
       </p> 
      </div> 
     </div> 
    </div> 
</body>

來源

2011-11-08 Mustafa Abdul-Kader

當您在HTML執行JavaScript函數，你正在做的方式，該功能沒有什麼HTML元素包含它的意識。繞過這個問題的一種方法（我最喜歡的方式）是將這些變量放入DOM元素的data-屬性中，並使用jQuery使用.data()對它們進行提取和操作。

第二個問題是h2標記不是span.team元素的父級（容器）。多一點DOM遍歷對於從另一個到另一個是必需的。

http://jsfiddle.net/mblase75/fzwBM/

新的HTML：

<div class="tournaments"> 
    <h2 class="trigger">Tournament 1<span class="status"></span></h2> 
    <div class="toggle_container"> 
     <div class="block"> 
      <h3>Details</h3> 
      <p>Deadline: DATE</p> 
      <p>Teams: <span class="team" data-a="3" data-b="7"></span> 
      </p> 
     </div> 
    </div> 

    <h2 class="trigger">Tournament 2 <span class="status"></span></h2> 
    <div class="toggle_container"> 
     <div class="block"> 
      <h3>Details</h3> 
      <p>Deadline: DATE</p> 
      <p>Teams: <span class="team" data-a="3" data-b="7"></span> 
      </p> 
     </div> 
    </div> 
</div>

新的JS：

$(document).ready(function() { 
    $(".toggle_container").hide(); 
    $("h2.trigger").click(function() { 
     $(this).toggleClass("active").next().slideToggle("slow"); 
    }); 

    $('span.team').each(function() { 
     var a = $(this).data('a'); 
     var b = $(this).data('b'); 
     var $status = $(this).closest('.toggle_container').prev('.trigger').find('.status'); 
console.log($status.length); 
     if (a != b) { // if a/b!=1, then a!=b 
      $status.text("OPEN").css("color", "green"); 
     } else { 
      $status.text("CLOSED").css("color", "red"); 
     } 
     $(this).text(a + "/" + b); 
    }); 
});

來源

2011-11-08 21:25:32 Blazemonger

因此，當您使用'.closest'時，它會從您當前在DOM樹中的位置找到最近的「toggle_」容器。一旦你到達'.prev（）'，我迷路了。之前的元素是否在當前元素之前？爲什麼你不能使用'.closest（'。trigger'）'？ –

另一種選擇是在跨度的ID傳給你想操縱：

http://jsfiddle.net/Lp99T/3/

來源

2011-11-08 21:32:35

JQuery - 父母

回答

相關問題