jQuery在两个ID之间切换

时间：2019-03-06 11:50:37

标签： javascript jquery html

为什么以下代码不起作用？红色方块变为绿色，但是第二次单击不会再次变为红色。 

jQuery(document).ready(function($) {
  $("#red").click(function() {
    $(this).attr("id", "green");
  });

  $("#green").click(function() {
    $(this).attr("id", "red");
  });
});
div {
  margin: 0 auto;
  width: 100px;
  height: 100px;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="red">

另请参阅：https://codepen.io/thomasmalley/pen/OqWNaM

6 个答案:

答案 0 :(得分：8)

问题是因为您在jQuery(function($) { $(document).on('click', "#red", function() { $(this).attr("id", "green"); }); $(document).on('click', "#green", function() { $(this).attr("id", "red"); }); });元素存在之前在加载时分配了事件处理程序。

要解决此问题，您需要使用委托的事件处理程序，以便在事件发生时评估元素选择器：

div {
  margin: 0 auto;
  width: 100px;
  height: 100px;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="red"></div>
id

话虽这么说，在运行时更改class属性不是一个好习惯。它们应该是静态的。更好的主意是改为在元素上切换jQuery(function($) { $('#foo').click(function() { $(this).toggleClass('green'); }); });，以控制样式。

#foo {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: red;
}

#foo.green {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foo"></div>
{{1}}

答案 1 :(得分：2)

首先，有div，其ID为red，在单击该div后，它会将ID切换为动态变化的green，因此在这种情况下，我们使用event-delegation。尝试下面的代码-

jQuery(document).ready(function($) {
  $(".parent").on('click', '#red', function() {
    $(this).attr("id", "green");
  });

  $(".parent").on('click', '#green', function() {
    $(this).attr("id", "red");
  });
});
div {
  margin: 0 auto;
  width: 100px;
  height: 100px;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div id="red"></div>
</div>

答案 2 :(得分：1)

之所以发生这种情况，是因为在您加载页面时，没有添加ID为green的click事件的元素。

相反，您可以通过以下方式使用事件委托：

$(document).on('click', '#red', function() {...}

和

$(document).on('click', '#green', function() {...}

这样，您的点击事件将应用于ID为green的元素。

请参见下面的工作示例：

jQuery(document).ready(function($) {
  $(document).on('click', '#red', function() {
    $(this).attr("id", "green");
  });

   $(document).on('click', '#green', function() {
    $(this).attr("id", "red");
  });
});
div {
  margin: 0 auto;
  width: 100px;
  height: 100px;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="red"></div>

答案 3 :(得分：1)

由于ID是动态添加的，因此在加载代码$("#green").click(function() {时找不到ID为green的元素，因此未为该元素设置click事件。因此，您可以在文档级别添加一个侦听器：

jQuery(document).ready(function($) {
  $(document).on('click', 'div', function(){
    var id = $(this).attr('id');
    if(id === 'red'){
      $(this).attr("id", "green");
    } else {
      $(this).attr("id", "red");
    }
  });
});
div {
  margin: 0 auto;
  width: 100px;
  height: 100px;
}
#red {
  background-color: red;
}

#green {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="red">

答案 4 :(得分：0)

更改脚本

public class CustomContactsExapandableListAdapter extends BaseExpandableListAdapter {

    private Context context;
    private List<String> expandableListTitle;
    private HashMap<String, ArrayList<GroupModel>> expandableListDetail;

    public CustomContactsExapandableListAdapter(Context context, List<String> expandableListTitle,
                                       HashMap<String, ArrayList<GroupModel>> expandableListDetail) {
        this.context = context;
        this.expandableListTitle = expandableListTitle;
        this.expandableListDetail = expandableListDetail;
    }

    @Override
    public Object getChild(int groupPosition, int childPosition) {
        return this.expandableListDetail.get(this.expandableListTitle.get(groupPosition))
                .get(childPosition);
    }


    @Override
    public long getChildId(int groupPosition, int childPosition) {
        return childPosition;
    }



    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
        Log.i("test", "the value in exapandable is " + getChild(groupPosition, childPosition));
        final GroupModel expandedListText = (GroupModel) getChild(groupPosition, childPosition);

        Log.i("test", "the text   is " + expandedListText.getName()+ " "+ expandedListText.getDesignation() + " " +expandedListText.getMobile() );
        if (convertView == null) {
            LayoutInflater layoutInflater = (LayoutInflater) this.context
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = layoutInflater.inflate(R.layout.single_contact, null);
        }
        TextView expandedListTextViewName = (TextView) convertView
                .findViewById(R.id.contact_name);
        TextView expandedListTextViewMobile = (TextView) convertView
                .findViewById(R.id.contact_mobile_num);
        expandedListTextViewMobile.setText(expandedListText.getDesignation());
        expandedListTextViewName.setText(expandedListText.getName());
        return convertView;

    }


    @Override
    public int getChildrenCount(int groupPosition) {
        return this.expandableListDetail.get(this.expandableListTitle.get(groupPosition))
                .size();
    }


    @Override
    public Object getGroup(int groupPosition) {
        return this.expandableListTitle.get(groupPosition);
    }

    @Override
    public int getGroupCount() {
        Log.i("test", "the value in exapandable group is " + expandableListTitle.size());
        return expandableListTitle.size();
    }



    @Override
    public long getGroupId(int groupPosition) {
        return groupPosition;
    }


    @Override
    public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
        String listTitle = (String) getGroup(groupPosition);
        if (convertView == null) {
            LayoutInflater layoutInflater = (LayoutInflater) this.context.
                    getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = layoutInflater.inflate(R.layout.single_party, null);
        }
        TextView listTitleTextView = (TextView) convertView
                .findViewById(R.id.party_name);
        ImageView imageView=convertView.findViewById(R.id.party_expandable_image);
        if(isExpanded){
            imageView.setImageResource(R.drawable.minus_icon_contacts);
        }
        else {
            imageView.setImageResource(R.drawable.plus_icon_contacts);
        }
        listTitleTextView.setTypeface(null, Typeface.BOLD);
        listTitleTextView.setText(listTitle);
        return convertView;
    }


    @Override
    public boolean hasStableIds() {
        return false;
    }

    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return true;
    }
}

答案 5 :(得分：-1)

请尝试以下代码：

<div id="wrapper">
   <div id="red">
</div>


 $("#wrapper").click(function() {
    var e = $(this).find('div');
     ( e.attr('id')) == 'red' ? (e.attr('id', 'green')) : (e.attr('id', 'red')) ;
 });
相关问题
最新问题