0

可调整大小无法从第二次单击开始，您能解释一下为什么吗？在下面的代码中，实际上我正在尝试将衬衫和裤子添加到 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>

请在这方面帮助我，并从第二次点击进行可调整的工作。

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 回答