Bahasa inggris saya tidak baik. maaf!

Saya ingin memiliki satu skrip untuk semua gambar di badan.

Skrip saya adalah mengkloning gambar untuk mencari dan mengkloning "gambar alt" ke figcaption.

Ini adalah dua skrip untuk dua gambar. dan saya ingin satu skrip untuk semua gambar apa pun.

Saya berharap telah menulisnya dengan benar dan saya berharap memperbaiki masalah saya.

Saya ingin unify = 1.ins,inm,.. 2.#fig 3.#figcapt

Terima kasih

$("img").removeAttr("height");
$('.ins, .inm, .inl, .outs, .outm, .outl').each(function(i) {
	var $this = $(this);
	var newClass = "i" + i++;    
    $this.addClass(newClass);
});

// i want unify The following two scripts :

// SCRIPT 1:

$('.ins.i0, .inm.i0, .inl.i0, .outs.i0, .outm.i0, .outl.i0').each(function() {
	var $repi = $(this);
	var repicl = $(this).attr("class");
		$repi.after("<figure id='fig0'></figure>");
		$('#fig0').addClass(repicl);
		$repi.clone().appendTo("#fig0");
		$("#fig0").append("<figcaption id='fcapt0' class='fcapt'></figcaption>");
	var $alti =  $(this).attr('alt');
	$("#fcapt0").html($alti);
	$(this).remove();
	return false;

});

// SCRIPT 2:

$('.ins.i1, .inm.i1, .inl.i1, .outs.i1, .outm.i1, .outl.i1').each(function() {
	var $repi = $(this);
	var repicl = $(this).attr("class");
		$repi.after("<figure id='fig1'></figure>");
		$('#fig1').addClass(repicl);
		$repi.clone().appendTo("#fig1");
		$("#fig1").append("<figcaption id='fcapt1' class='fcapt'></figcaption>");
	var $alti =  $(this).attr('alt');
	$("#fcapt1").html($alti);

	$(this).remove();
	return false;

});
figure{
	margin: auto;
	padding:auto; 
	float: inherit;
	height:auto !important;
	position: relative;
	
}
figure.inm{
	width:50% !important;
	margin:0;
	padding:0; 
}
figure.inl{
	width:75% !important;
	margin:0;
	padding:0; 
}
figure.ins img, figure.inm img, figure.inl img{
	width:100% !important;
	margin:0;
	padding:0; 
}
figure.ins{
	width:33.3% !important;
	margin:0;
	padding:0; 
}
figure.size-full{
	margin:10px 10px 0px 10px !important;
	padding:0 !important;

}
figure.alignnone, figure.alignright  {
	float: right;
	margin:0;
	padding:0;
}
figure.alignleft   {
	float: left;
	margin:0;
	padding:0;
}
figure figcaption{
	position: absolute;
	background-color: #000;
	color: #fff;
	opacity: 0.5;
	width: 97%;
	bottom: 13px;
	right: 0;
	height: auto;
	padding:0 1.5% 0 1.5%;
	line-height: 180%;
	font-size: 9pt;
	margin: 0;
	text-align: right;

}

figure:hover figcaption{
	display: none
}
body img{
	max-width:100% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>aaaaaaa</p>
<p><img class="inm alignright wp-image-2414 size-full" src="bbbbbb.jpg" alt="bbbbbb" width="287" height="176" /></p>
<p>cccccccccc</p>
<p>ddddddddd</p>
<p><img class="inm alignleft wp-image-2425 size-full" src="eeeeeee.jpg" alt="eeee " width="271" height="186" /></p>
<p>ffffffff</p>
<p>gggggggggg</p>
<p>hhhhhhhhhhhh</p>
2
ramin 26 Oktober 2019, 13:42

1 menjawab

Jawaban Terbaik

Anda dapat menggunakan i sebagai kelas, kemudian melakukan semua tindakan secara dinamis berdasarkan i seperti di bawah ini. Saya juga mengoptimalkan kode Anda dan menghapus beberapa tambahan. Saya juga menggunakan wrap alih-alih mengkloning dan menghapus elemen.

$('.inm').each(function(i) {

  var $this = $(this);
  $this.addClass("i" + i);
    
  var repicl = $this.attr("class");
  var $alti = $this.attr('alt');

  $this.wrap("<figure id='fig"+i+"' class='"+repicl+"'></figure>");
  $("#fig" + i).append("<figcaption id='fcapt"+i+"' class='fcapt'>"+$alti+"</figcaption>");
  
});
figure {
  margin: auto;
  padding: auto;
  float: inherit;
  height: auto !important;
  position: relative;
}

figure.inm {
  width: 50% !important;
  margin: 0;
  padding: 0;
}

figure.inl {
  width: 75% !important;
  margin: 0;
  padding: 0;
}

figure.ins img,
figure.inm img,
figure.inl img {
  width: 100% !important;
  margin: 0;
  padding: 0;
}

figure.ins {
  width: 33.3% !important;
  margin: 0;
  padding: 0;
}

figure.size-full {
  margin: 10px 10px 0px 10px !important;
  padding: 0 !important;
}

figure.alignnone,
figure.alignright {
  float: right;
  margin: 0;
  padding: 0;
}

figure.alignleft {
  float: left;
  margin: 0;
  padding: 0;
}

figure figcaption {
  position: absolute;
  background-color: #000;
  color: #fff;
  opacity: 0.5;
  width: 97%;
  bottom: 13px;
  right: 0;
  height: auto;
  padding: 0 1.5% 0 1.5%;
  line-height: 180%;
  font-size: 9pt;
  margin: 0;
  text-align: right;
}

figure:hover figcaption {
  display: none
}

body img {
  max-width: 100% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img class="inm" alt="Some alt text" src="https://images.unsplash.com/photo-1446292267125-fecb4ecbf1a5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />

<img class="inm" alt="Some alt text" src="https://images.unsplash.com/photo-1446292267125-fecb4ecbf1a5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" />
1
Pedram 26 Oktober 2019, 12:22