0

你好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 函数）。

4

1 回答 1

0

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

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

于 2013-08-04T22:53:21.823 回答