javascript - 可重用的 jQuery 函数

Question

        <div class="row">
            <div class="col my-col my-col-blue" id="show1">
                <h3>something</h3>
                <p>Lorem error ullam?</p>
            </div>
            <div class="col my-col my-col-red" id="show2>
                <h3>something</h3>
                <p>Lorem error ullam?</p>
            </div>
            <div class`enter code here`="col my-col my_nav" id="show3">
                <h3>something</h3>
                <p>Lorem error ullam?</p>
            </div>
        </div>
        <div class="row" id="target1" style="display: none">
            <div class="menu col my-col my-col-blue">fist 1</div>
        </div>
        <div class="row" id="target2" style="display: none">
            <div class="col my-col my-col-red">fist 2</div>
        </div>
        <div class="row" id="target3" style="display: none">
            <div class="col my-col my_nav">fist 3</div>
        </div>

当点击 id(show1) 时如何获得正确的 id，以便它可以切换(target1)。我可以按如下方式进行操作并且它可以工作，但我想创建一个可重用的函数。我可以按照我的方式做，但我需要 3 个不同的功能。谢谢

ps。当点击 id(show1) 时，id(target1) 切换(显示)。

$(document).ready(function() {
      $("#show1").click(function() {
           $("#target1").toggle();
      })
 })

Answer 1

我更新了您的 IDS，为每个标题指定了一个类，并使用数据目标使其正常工作。

$(document).ready(function() {
      $(".nav-link").on("click",function() {
           $($(this).data("target")).toggle();
      })
 })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
            <div data-target="#target1" class="col my-col my-col-blue nav-link" id="show1">
                <h3>something</h3>
                <p>Lorem error ullam?</p>
            </div>
            <div data-target="#target2" class="col my-col my-col-red nav-link" id="show2">
                <h3>something</h3>
                <p>Lorem error ullam?</p>
            </div>
            <div data-target="#target3" class="col my-col my_nav nav-link" id="show3">
                <h3>something</h3>
                <p>Lorem error ullam?</p>
            </div>
        </div>
        <div class="row" id="target1" style="display: none">
            <div class="menu col my-col my-col-blue">fist 1</div>
        </div>
        <div class="row" id="target2" style="display: none">
            <div class="col my-col my-col-red">fist 2</div>
        </div>
        <div class="row" id="target3" style="display: none">
            <div class="col my-col my_nav">fist 3</div>
        </div>