Question

Hello stackoverflowers，

我的页面上有一个jquery bootstrap下拉列表，其中包含各种大小（男士小，中等）和带有文本元素的kineticJs容器。我想获得$（'＃chosenSize'）。text（）;出现在kineticJs容器中，但它不起作用。有人可以解释一下为什么吗？

这是我的html的一小部分：

<div id="dropdown-1" class="dropdown dropdown-tip">
        <ul class="dropdown-menu">
            <li><a class="dropOption" href="#msm">Mens small</a></li>
            <li><a class="dropOption" href="#mmed">Mens medium</a></li>
            <li><a class="dropOption" href="#mlarge">Mens large</a></li>
            <li><a class="dropOption" href="#mxl">Mens XL</a></li>
            <li class="dropdown-divider"></li>
            <li><a class="dropOption" href="#wsm">Womens small</a></li>
            <li><a class="dropOption" href="#wmed">Womens medium</a></li>
            <li><a class="dropOption" href="#wlarge">Womens large</a></li>
            <li><a class="dropOption" href="#wxl">Womens XL</a></li>
        </ul>
    </div>
    <a href="#" id="trigger" data-dropdown="#dropdown-1">Choose your size</a>
    <p id="sizeContainer">Your chosen size is: <span id="chosenSize"></span></p>

    <div id="container"></div> <!-- KineticJs canvas -->

由于没有必要向您展示所有代码，我只会向您展示我想要将kineticJs和jQuery结合起来的文本元素：

      var sizeText = new Kinetic.Text({
      x:40,
      y:20,
      text:'Size: ' + $('#chosenSize').text(),
      fontSize:16,
      fontFamily:'Arial',
      fill:'black'
    });

我尝试使用像这样的普通javascript

document.getElementById('chosenSize').innerHTML;

但它也没有用。我哪里错了？

谢谢！

编辑：

问题是我没有在更改时刷新文本和画布元素。所以这个问题的答案是：

     $('.dropOption').on('click', function() {
      sizeText.setText('Size: ' + $(this).text());
      layer.draw();
    })

你必须把它放在drawImage函数的末尾（它是主要的KineticJs函数）。

Answer 1

鉴于从下拉列表中进行选择时发生的代码缺失代码，很可能的假设是您在选择大小后不更新Kinetic.Text对象。您需要刷新Kinetic.Text对象上的文本集以及刷新画布。

简而言之，请在下拉列表中附加onSelect个事件。用它来调用sizeText.setText('Size: ' + $('#chosenSize').text())，最后调用canvasLayer.draw()

我可以结合KineticJS和jQuery吗？

1 个答案: