Question

我一直在尝试制作一个按钮，根据是否按下来给出不同的答案（如果按下按钮，一旦你得到'是'，但是如果按下按钮你会得到'不' ），但是当我运行这段代码时，我得到的是“是”，我怎么能解决这个问题？

注意：我对Javascript和Jquery很新，所以请详细解释一下你的答案。

$('#option1').data('unclicked', false)

$('#option1').click(function() {
    if ($('#option1').data('unclicked', false)) {
        $('#option1').data('clicked', true);
    } else if ($('#option1').data('clicked', true)) {
        $('#option1').data('clicked', false);
    } else {
        alert('ERROR');
    }

    if ($('#option1').data('clicked', true)) {
        alert('yes');
    } else if ($('#option1').data('clicked', false)) {
        alert('no');
    } else {
        alert('ERROR');
    }
});

Answer 1

您的if语句设置数据属性，而不测试其当前值。

if ($('#option1').data('clicked', true)) {

应该是

if ($('#option1').data('clicked') === true)  {
// or...
if ($('#option1').data('clicked')) { // same as above

您还有两个不同的数据属性，＆＃39;点击＆＃39;这会引起你一些困惑 - 你不能确定你（尝试）测试哪一个与你更新哪一个。将其简化为单个属性。

这是针对错误的。除了＆＃34; true＆＃34;和＆＃34;假＆＃34; - 它总是一个或另一个。也没有必要将数据属性初始化为false - 如果它未初始化，它无论如何都会评估为假。

将所有这些结合在一起，您的代码可以简化为：

＆＃13;

$('#option1').click(function() {
  // 'this' is now the element that was clicked
  $(this).data('clicked', !($(this).data('clicked'))) // set the data attribute to the opposite of its current value.  The "!" means "not"

  if ($(this).data('clicked')) {
    alert('yes');
  } else {
    alert('no');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="option1">Click</div>

＆＃13;

Answer 2

使用一致的<android.support.design.widget.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="@dimen/app_bar_height" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" > <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing" android:layout_width="match_parent" android:layout_height="match_parent" app:contentScrim="#f15b6e" app:expandedTitleGravity="bottom" android:background="@android:color/white" app:expandedTitleMarginBottom="170dp" app:expandedTitleMarginStart="10dp" app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"> <FrameLayout android:layout_width="match_parent" android:layout_height="225dp" android:fitsSystemWindows="true"> <ImageView android:id="@+id/main.backdrop" android:layout_width="match_parent" android:layout_height="@dimen/nav_header_height" android:src="@drawable/hair" app:layout_collapseMode="parallax" android:adjustViewBounds="true" android:fitsSystemWindows="true" android:cropToPadding="false" android:scaleType="fitXY" /> <FrameLayout android:layout_width="match_parent" android:layout_height="225dp" android:background="@drawable/gradient_bg"> </FrameLayout>属性，例如仅data。
使用clicked 设置，data(key, value) 获取。
布尔属性不应该有第三种状态。

这意味着：

data(key)

Answer 3

因此jQuery的数据函数将数据（键值对）绑定到元素。您的问题是，您正在添加值为false的“未点击”，但会检查不存在的“点击”数据。

这是正确的代码：

$('#option1').data('unclicked', false);

$('#option1').click(function() {
   if ($(this).data('unclicked')) {
     $(this).data('unclicked', false);
     alert("it was true");
    } else  {
     $(this).data('unclicked', true);
     alert("it was false");
    } 
 });

希望有所帮助。

交替按钮不起作用

3 个答案: