Question

我有这段代码：

HTML

Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'void android.support.v7.widget.Toolbar.setTitle(java.lang.CharSeq‌uence)' on a null object reference at com.justfashion.ActivityMainWallet.onCreate(ActivityMainWall‌et.java:251)

CSS

 <select class="form-control" name="footerLayout">

      <option value="">
      </option>
      <option value="1">
        1 column
      </option>
      <option value="2">
        2 column
      </option>

    </select>


    <div class="column column-1">
      <h3>Content</h3>

      <textarea class="form-control" type="text" name="footerContent"></textarea>
    </div>

    <div class="column column-2">
      <h3>Content2</h3>

      <textarea class="form-control" type="text" name="footerContent"></textarea>
    </div>

Jquery的

.column-1 {
  display: none;
}

.column-2 {
  display: none;
}

如果我点击选择标记中的某个选项，它就不会立即显示隐藏的div。我必须点击它2次才能使它工作。

亲自尝试：

https://jsfiddle.net/mk425srx/

请注意，您必须单击该选项2次才能使用，我希望这是1次。它必须直接改变。我如何实现这一目标。编辑它在firefox和chrome 53中运行良好，显然它是一个镀铬54问题..

Answer 1

您应该使用<body ng-app="myApp" > <div ng-controller="ListCtrl"> <ul> <li ng-repeat="question in questions"> {{question.qid}} </li> </ul> </div> </body>事件而不是change

只需更改JS中的事件即可。更新的代码类似于

click

查看工作小提琴https://jsfiddle.net/mk425srx/2/

<强>更新

$('[name=footerLayout]').change(function() { var selector = ".column-" + $(this).val(); //Create selector $(".column").not(selector).hide(); //Hide others $(selector).show(); //Show column based on selected value });事件无法正常工作的原因是，{<1}}事件在单击时被触发但click事件在之后被触发值已更改。因此，click事件会在更改值选择之前触发。这就是为什么不应该使用change事件来检测值的变化。

要清楚这一点，请尝试以下代码来查看事实。

click

小提琴链接：https://jsfiddle.net/mk425srx/3/

在Chrome 54上，选择元素上的jQuery点击事件无法正常工作

1 个答案: