Question

我正在尝试创建一个画廊，您可以在其中上传带有类别的图像。该类别需要作为一个类添加，以便我进行梳理。还是有其他方法可以在不使用类的情况下对图库中的图像进行分类

Answer 1

您可能必须使用javascript。

一个简短的示例是：

var className = document.getElementById("InputField");
element.classList.add(className);

让我知道是否需要更多说明。

Answer 2

使用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>

如何通过HTML中的输入字段将类添加到HTML元素？

2 个答案: