时间戳

首页 > 解决方案 > 如何通过 HTML 中的输入字段向 HTML 元素添加类？

javascript - 如何通过 HTML 中的输入字段向 HTML 元素添加类？

问题描述

我正在尝试制作一个画廊，您可以在其中上传带有类别的图像。这个类别需要添加为一个类，以便我可以整理出来。或者是否有其他方法可以在不使用类的情况下对图库中的图像进行分类

标签： javascriptjqueryhtml

解决方案

使用jQuery和bootsrap

$('#needs-border').addClass('border border-info');
$('p').addClass('border border-danger');

//using input
$(document).on('change' , 'select', function(){
  var color = $(this).val();
  var bgDiv = $('#bg');
  bgDiv.removeClass('bg-info bg-success bg-danger');
  if(color){
    bgDiv.addClass(color)
  }

})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="bg" class="row p-3">
  <div id="needs-border" class="col-md-12 m-4 p-3">
    <p class="m-1">This is a paragraph</p>
  </div>
</div>
<div class="row p-3">
  <div class="col-md-12">
    <select class="form-control">
       <option value="">Remove all</option>
       <option value="bg-danger">Red</option>
       <option value="bg-info">Blue</option>
       <option value="bg-success">green</option>
    </select>
  </div>
</div>

推荐阅读