Question

我必须在文本点击时显示图片名称，而不创建多个文本点击ID。在这段代码中我已经在图像点击上完成了这个但是我希望它在文本上点击。如果它可以通过类名或单个id完成，那么这样做因为我有100个图像我不想写相同的代码多个文件。

$('img').click(function()
{
 var test = $(this).attr('src').split("/").pop();
 document.getElementById("result").value= test;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="row">
    <div>
     <img src="1.png">
     <p>click<p>
    </div>
    <div>
     <img src="2.png">
     <p>click</p>
    </div>
    <div>
     <img src="3.png">
     <p>click</p>
    </div>
</div>
<form>
 <input type="text" id="result">
</form>

Answer 1

如下所示： -

＆＃13;

$('p').click(function(){//on click of paragraph
 var test = $(this).prev('img').attr('src').split("/").pop(); // get the current click paragraph parent div image src and find out the name of image by using split
 $("#result").val(test); // update the name in text-field
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="row">
    <div>
     <img src="1.png">
     <p>click<p>
    </div>
    <div>
     <img src="2.png">
     <p>click</p>
    </div>
    <div>
     <img src="3.png">
     <p>click</p>
    </div>
</div>
<form>
 <input type="text" id="result">
</form>

＆＃13;

注意： - 不要将javascript and jQuery与其他人混在一起。纯粹使用任何一种。

Answer 2

$('p').click(function()
{
    var test = $(this).parent('div').find('img').attr('src').split("/").pop();
    document.getElementById("result").value= test;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="row">
    <div>
        <img src="1.png">
        <p>click<p>
    </div>
    <div>
        <img src="2.png">
        <p>click</p>
    </div>
    <div>
        <img src="3.png">
        <p>click</p>
    </div>
</div>
<form>
    <input type="text" id="result">
</form>

Answer 3

使用find()查找img代码，并在我们的案例p中将类应用于.clickelem代码，请参阅以下代码段以获取更多信息。

＆＃13;

$('.clickelem').click(function()
{
  var test = $(this).parent().find('img').attr('src').split("/").pop();
  document.getElementById("result").value= test;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="row">
    <div>
     <img src="1.png" />
     <p class="clickelem">click<p>
    </div>
    <div>
     <img src="2.png" />
     <p class="clickelem">click</p>
    </div>
    <div>
     <img src="3.png" />
     <p class="clickelem">click</p>
    </div>
</div>
<form>
 <input type="text" id="result">
</form>

＆＃13;

Answer 4

$( document ).ready(function() {

    //option one set onclick on every p tag
    $('img').parent().find('p').click(function() {
        var test = $(this).parent().find('img').attr('src').split("/").pop();
        document.getElementById("result").value= test;
    });

    //option two set onclick on parent div and filter events
    $('.row').click(function(e) {
        if (e.target.tagName != 'P') {
            return;
        }
        var test = $(e.target).parent().find('img').attr('src').split("/").pop();
        document.getElementById("result").value= test;
    });

})

Answer 5

您可以按照以下方式执行此操作：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="row">
    <div>
      <img src="1.png">
      <p class='para'>click<p>
    </div>
    <div>
     <img src="2.png">
     <p class='para'>click</p>
    </div>
    <div>
     <img src="3.png">
     <p class='para'>click</p>
    </div>
</div>
<form>
 <input type="text" id="result">
</form>

的Javascript

$('.para').click(function()
{
    var imageSrc = $(this).prev("img");
    var test = $(this).attr('src').split("/").pop();
    document.getElementById("result").value= test;
});

在文本上单击显示图像名称

5 个答案: