Question

  if($(window).width() < 768){
    $(document).ready(function(){
        $('.nb-team-grid').on('click', function(e){
          $('.nb-team-info').toggleClass('test');
        });
    });
}

当我们点击div时，我正在尝试添加样式。我尝试过，但无法正常工作。并且我已经在上面附加了我的代码以进行更多说明。另外，我附上了我的测试链接，请打开该链接，这样您就可以看到我想要的交互。

http://dev.netbramha.in/projects/test-coder/test.html

Answer 1

将$（document）.ready移至if语句之外：

$(document).ready(function() { 
    if($(window).width() < 768){
        $('.nb-team-grid').on('click', function(e){
            $('.nb-team-info').toggleClass('test');
        });
    }
})

Answer 2

您应该添加public class LoadVehicleTypeAdapter extends RecyclerView.Adapter<LoadVehicleTypeAdapter.CarTypesHolder> { private List<TaxiTypeResponse.Message> CarTypesModelsList; private Context mContext; VehicleTypeView vehicleTypeView; int I=-1; int idd=0; Activity activity; GoogleMap map; int II=-1; List<VehicleClick> list; public static String dbname="HellooClick"; public static MyAppRoomDataBase myAppRoomDataBase; public class CarTypesHolder extends RecyclerView.ViewHolder implements View.OnClickListener { public CustomTextView mCarType; public CircleImageView mCarTypeImage; LinearLayout llRoot; CardView cardView; setOnitemclick listener; SparseBooleanArray mSparseArray; public void setOnItemClickListner(setOnitemclick listener) { this.listener=listener; } public CarTypesHolder(View view) { super(view); mCarType = (CustomTextView) view.findViewById(R.id.frag_cartypes_inflated_name); mCarTypeImage = (CircleImageView) view.findViewById(R.id.frag_cartype_inflated_frameImage); llRoot = (LinearLayout)view.findViewById(R.id.root1); cardView=(CardView) view.findViewById(R.id.cardf); mSparseArray=new SparseBooleanArray(); view.setOnClickListener(this); } @Override public void onClick(View v) { mSparseArray.put(getAdapterPosition(), true); listener.ImageClick(v,getAdapterPosition()); } } public LoadVehicleTypeAdapter(Context context, List<TaxiTypeResponse.Message> CarTypesModelsList, VehicleTypeView vehicleTypeView,Activity activity,GoogleMap map) { this.CarTypesModelsList = CarTypesModelsList; mContext = context; this.vehicleTypeView = vehicleTypeView; this.activity=activity; this.map=map; } @Override public CarTypesHolder onCreateViewHolder(ViewGroup parent, int viewType) { View itemView = LayoutInflater.from(parent.getContext()) .inflate(R.layout.frag_cartype_inflated_view, parent, false); return new CarTypesHolder(itemView); } @SuppressLint("ResourceType") @Override public void onBindViewHolder(final CarTypesHolder holder, final int position) { myAppRoomDataBase=Room.databaseBuilder(activity,MyAppRoomDataBase.class,dbname).allowMainThreadQueries().build(); list=myAppRoomDataBase.userDao().getAll(); if(list.size()!=0){ II= Integer.parseInt(list.get(0).RideId); } if (II==position) { holder.llRoot.setBackgroundColor(Color.parseColor("#999999")); holder.mCarType.setTextColor(Color.parseColor("#ffffff")); } else { } SharedPreferences sharedPreferences = activity.getSharedPreferences("mSelected", Context.MODE_PRIVATE); TaxiTypeResponse.Message carTypesModel = CarTypesModelsList.get(position); holder.mCarType.setText(carTypesModel.getName()); holder.mCarTypeImage.setBackgroundResource(R.drawable.wait); int color = Color.parseColor(PreferenceHandler.readString(mContext,PreferenceHandler.SECONDRY_COLOR,"#006fb6")); holder.mCarType.setTextColor(color); holder.setOnItemClickListner(new setOnitemclick() { @Override public void ImageClick(View v,int position1) { I=position1; notifyDataSetChanged(); if (list.size()!=0) { myAppRoomDataBase.userDao().delete(); list.clear(); } VehicleClick vehicleClick=new VehicleClick(); vehicleClick.setRideId(String.valueOf(position1)); myAppRoomDataBase.userDao().insert(vehicleClick); list.add(vehicleClick); } }); if (I==position) { holder.llRoot.setBackgroundColor(Color.parseColor("#999999")); holder.mCarType.setTextColor(Color.parseColor("#ffffff")); } else { holder.llRoot.setBackgroundColor(Color.parseColor("#f3f3f3")); holder.mCarType.setTextColor(Color.parseColor("#2196F3")); } Picasso.with(mContext).load(carTypesModel.getImagePath()).into(holder.mCarTypeImage); } @Override public long getItemId(int position) { return CarTypesModelsList.get(position).getID(); } @Override public int getItemCount() { return CarTypesModelsList.size(); } public void setSelection(LinearLayout imageView,CustomTextView textView,boolean value,int position){ if(value){ imageView.setBackgroundColor(Color.parseColor("#999999")); textView.setTextColor(Color.parseColor("#FFFFFF")); }else{ System.out.println("11111111111111111000000111111111111"); imageView.setBackgroundColor(Color.parseColor("#f3f3f3")); textView.setTextColor(Color.parseColor("#2196F3")); } } public interface setOnitemclick{ void ImageClick(View view,int position); } @Override public int getItemViewType(int position) { return position; } }而不是$(window).width() <= 768，以使代码在Ipad中可用，而少做些。因为Ipad有$(window).width() < 768。希望这对您有用。

min-width:768px

Answer 3

问题是，您的JavaScript正在启动时检查宽度是否为768。如果不是，则if语句将被完全忽略，并且不再运行。因此，您需要在单击时而不是在启动时检查屏幕宽度。

赞：

$(document).ready(function() {
  $('.nb-team-grid').on('click', function(e){
      if($(window).width() < 768){
         $('.nb-team-info').toggleClass('test');
      }
  });
});

此外，如果要在调整屏幕大小时运行某些功能，我建议使用jQuery的resize事件，如下所示：

$(window).on('resize', () =>{
   if($(window).width < 800){  //You can monitor for your own width, I just chose 800.
      // functions to run
   }
});

Javascript-当我们点击div

3 个答案: