0

2 回目のクリックでサイズ変更が機能しない理由を教えてください。以下のコードでは、実際にシャツとパンツを div に追加しようとしています。それらが追加されたら、サイズを変更する必要があるため、サイズ変更ボタンも追加しました。サイズ変更は初めて機能し、別のシャツやパンツを追加しようとするたびに. サイズ変更が機能していません。その理由を知り、このプロジェクトを完成させるのを手伝ってくれませんか。

 <html lang="en">
 <head>
 <title>Outfit Demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript">
$(document).ready(function() {
  // sets draggable the elements with id="shirt"
  $('#shirt').draggable({
    cursor: 'move',        // sets the cursor apperance
    containment: '#leftpanel'    // sets to can be dragged only within its parent
  });
  // sets draggable the paragraph inside #trousers
  $('#trousers').draggable({
    cursor: 'move',
    containment: '#leftpanel'      // sets to can be dragged only within its parent
  });

  $('#btn').click(function() {
    // removes all LI with class="cls" in OL
    $('#shirt').resizable({
    cursor: 'move',
    containment: '#leftpanel'      // sets to can be dragged only within its parent
  });
  $('#trousers').resizable({
    cursor: 'move',
    containment: '#leftpanel'      // sets to can be dragged only within its parent
  });
  });
});

  var shirt;
  var pant;
  function selectshirt(src)
  {
  shirt = src;
  path = "<img src=\""+src+"\" height=\"100%\" width=\"100%\"/>";
  invisible("middlepanel");
  visible("rightpanel");

  document.getElementById("shirt").innerHTML=path;
  document.getElementById("cart").style.visibility="visible";
  }
  function selectpants(src)
  {
  pant = src;
  path = "<img class=\"pic1\" src=\""+src+"\" height=\"100%\" width=\"100%\"/>";
  document.getElementById("trousers").innerHTML=path;
  }
  function addtocart()
  {
  alert("Shirt:"+shirt+"\npant:"+pant);
  }
  function changeshirt()
  {
  visible("middlepanel");
  invisible("rightpanel");
  }
  function changepant()
  {
  visible("shirtcontainer");    
  invisible("pantcontainer");
  }
  function visible(containername)
  {
  document.getElementById(containername).style.visibility="visible";
  }
  function invisible(containername)
  {
  document.getElementById(containername).style.visibility="hidden";
  }
  </script>
</head>

<body>
<div id="leftpanel" style="width:800px;height:600px;border:1px solid black;">
    <div id="shirt"  style="left:0;height:300px;width:300px;"></div>
    <div id="trousers" style="left:0;height:300px;width:300px;" ></div>
</div> 
<div style="left:0;height:70%;" id="cart">
    <button  onclick="changeshirt()">Change Shirt</button>
    <button  onclick="addtocart()">Add to cart</button>
    <button id="btn">Resize</button>
</div> 
<div id="middlepanel" style="width: 100%; height: 100%; position:absolute;right:0;top:0;width:33%;overflow:auto;">
    <div id="shirtcontainer">
        <img src="images/shirts/shirt.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/>
    </div>
</div> 
<div id="rightpanel" style="width: 100%; height: 100%; position:absolute;right:0;top:0;width:33%;overflow:auto;">
    <div id="pantcontainer">
        <img src="images/pants/pant.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/>
    </div>
</div>


</body>
<script>
invisible("rightpanel");
invisible("cart");
</script>
</html>

これで私を助けて、2回目のクリックからもリサイズ可能にしてください。

4

2 に答える 2

0

まず、私はiphoneを使用していて、コードを読み取るのが非常に難しいため、申し訳ありません。
ただし、いくつかの問題が発生する可能性があります
。1）サイズ変更可能な要素を更新しない、プラグイン関数を再初期化しようとする可能性がある
2）重複したIDのサイズを変更しようとしている。
3）何かを追加するために追加していて、クリック関数などを使用する場合は、それを$（document）.on（event、element、function（）{}）でバインドする必要があります。
残忍な解決策
要素を破棄して再初期化します

于 2013-02-28T11:36:08.757 に答える
0

@Dheed解決策をありがとう。あなたが言ったように、私はそれを破壊して再初期化しようとしました

$("#shirt").resizable("destroy"); 
  $("#shirt").resizable({
    cursor: 'move',
    containment: '#leftpanel'      // sets to can be dragged only within its parent
  });

これは私にとってはうまくいきました。

ありがとうございます

于 2013-03-01T01:46:38.897 に答える