1

私は自分のdivに最小化と最大化の機能を与えたいと思っています..そのために、jspページに次のコードを書きました

<div id="widnow" style="width: auto;">
    <div id="title_bar">
      <button type="button" class="max" id="button">
    <img id="max" src="<%=request.getContextPath()%>/img/Minimize.png" />
</button>
    </div>
      <div id="box" style="height:auto; width: auto;">
       <span id="info3" style="display: none;"></span>

    <div id="chart3" style="width:80%; height:300px;"></div>



    </div>

 </div>

以下は私のcssです

#widnow{
    width:400px;
    border: 1px solid #DCDCDC;

}



#button{
    width: 25px;
    height: 24px;
    float:right;
    cursor:pointer;
    position:relative;
    margin: 0px 0px 0px 0px;

}
#title_bar{
    background-image: url("<%=request.getContextPath()%>/img/Header Background.png");
    height: 25px;
    width: auto;
  border-bottom: 1px solid #DCDCDC;

}

以下は私のjsです

$("#button").click(function(){

    var isclass = $(this).attr('class');
    if (isclass == "max") 

    {
        $("#max").attr("src","<%=request.getContextPath()%>/img/Minimize.png");
        $(this).removeClass('max');
    }
    else{
        $(this).addClass('max');
        $("#max").attr("src","<%=request.getContextPath()%>/img/Maximize.png");
    }
    $("#box").slideToggle();

});

そのうまく機能するdivが1つある場合、この機能を提供したい..しかし、1つの単一のJavaスクリプト関数またはj-queryを使用して、これをどのように達成できますか?単一のページに多くのdivがあり、すべてに個別の最大化と最小化が必要ですファシリティ.だから、すべてのdivで動作するJavaスクリプトを変更する方法を教えてもらえますか?

4

3 に答える 3

2

コードを少し再構築します。

function activateMaxMin(elemButton,elemMax,elemBox)
{

  var isclass = elemButton.attr('class');
    if (isclass == "max") 

    {
        elemMax.attr("src","<%=request.getContextPath()%>/img/Minimize.png");
        elemButton.removeClass('max');
    }
    else{
        elemButton.addClass('max');
        elemMax.attr("src","<%=request.getContextPath()%>/img/Maximize.png");
    }
    elemBox.slideToggle();

}

$("#button").click(function(){
activateMaxMin($(this),$("#max"),$("#box"));

});

このような別のボタンがある場合は、次を使用します。

$("#button1").click(function(){
activateMaxMin($(this),$("#max1"),$("#box1"));

});

もちろん、もっと効率的な方法で実行できたかもしれませんが、それにはコードを完全に書き直す必要があります。

于 2013-01-28T08:00:06.597 に答える
1 
<div id="widnow" class='window' style="width: auto;">
    <div id="title_bar" class='title_bar'>
      <button type="button" class="maxMinButton" id="button">
    <img id="max" src="<%=request.getContextPath()%>/img/Minimize.png"  class='max'/>
</button>
    </div>
      <div id="box" style="height:auto; width: auto;" class='box'>
       <span id="info3" style="display: none;"></span>

    <div id="chart3" style="width:80%; height:300px;"></div>



    </div>

 </div>

//JavaScript 関数

関数 activateMaxMin(elemButton,elemMax,elemBox) {

var isclass = elemButton.attr('クラス'); if (isclass == "max")

{
    elemMax.attr("src","<%=request.getContextPath()%>/img/Minimize.png");
    elemButton.removeClass('max');
}
else{
    elemButton.addClass('max');
    elemMax.attr("src","<%=request.getContextPath()%>/img/Maximize.png");
}
elemBox.slideToggle();

}

$(document).ready(function(){
$(".maxMinButton").click(function(){

var elemButton=$(this);
var maxMinWidnow=button.closes('.window');
var elemMax=$(".max:firs",maxMinWidnow);
var elemBox=$(".box:first",maxMinWidnow);

activateMaxMin(elemButton,elemMax,elemBox)
});
});

これは、コードに多くの変更を加えずに取得できる最高のものです。html の各 div に必要なクラスが追加されていることに注意してください。改造の際はご注意ください。

于 2013-01-28T08:30:05.240 に答える
1

のようにid notation "#"クラスセレクターに変更するだけです"."#max.max

どのブラウザが最初に出現した場合にのみ機能し、imgをidに変更しようとしますかidclass

あなたの場合は違いますが、それがあなたに役立つかどうかを確認するためのフィドルを作成しました:

http://jsfiddle.net/32e2V/

$(".button").click(function () {
  $(this).closest('div').siblings(".box").slideToggle();
  if ($(this).text() == "max") {
    $(this).text('min');
  } else {
    $(this).text('max');
  }
});
于 2013-01-28T07:58:12.793 に答える