单击后更改按钮颜色和功能

Question

我有一个绿色的加入按钮，可以让用户加入群组。然后，用户可以从他们登录的仪表板中查看他们加入的组。数据存储在数据库的groups 表中。

我希望按钮在被点击后变为红色并读取Unjoin。

我知道每个链接都有五种不同的状态：link、hover、active、focus 和 visited，虽然 visited 是正常选项，但我需要确保已登录in 用户将始终看到红色的 Unjoin 按钮，即使他们清除了缓存或其他内容。

我是否需要让按钮与数据库进行通信以验证用户是否加入了群组，或者是否需要使用 javascript 或其他方式来完成？

编辑

感谢@TanvirAhmed 提供以下代码。它部分工作，注销的用户看到绿色，登录看到红色。但是，已登录的用户总是看到红色，而只有在他们之前加入过群组时才应该看到红色。

@if(Auth::user() == '')

<form method="post" action="{{ route('groups.join') }}">
@csrf
<button class="btn btn-success" type="submit">Join Group</button>
<input type="hidden" name="group_id" value="{{ $group->id }}" />
</form>

@else

<form action="{{ route('groups.destroy', $group->id)}}" method="post">
@csrf
@method('DELETE')
<button class="btn btn-sm btn-danger" type="submit">Delete</button>
</form>

@endif

单击红色删除按钮时，我只剩下重定向问题。

我不想在点击删除按钮后重定向用户，他们应该留在当前页面{{ route('groups.show',$group->id)}}。

但是，我需要按钮操作来从组中删除 (destroy) 用户用户，所以我知道我需要 {{ route('groups.destroy', $group->id)}}。

那么，我如何执行销毁路由并让用户留在当前页面？

GroupController.php

<?php

namespace App\Http\Controllers;

use App\Group;
use Illuminate\Http\Request;

// All Groups pages require login except 'show'
class GroupsController extends Controller
{

    public function __construct()
    {
        $this->middleware('auth', ['except' => 'show']);
    }

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $groups = Group::where('created_by_user_id', auth()->id())->get();

        return view('groups/index', compact('groups'));
    }

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function joined()
    {
        //@todo change query to show groups joined
        // $groups = Group::where('created_by_user_id', auth()->id())->get();
        // $groups = Group::with('joinedUsers')

        $groups = auth()->user()->groupsJoined()->get();

        return view('groups/joined', compact('groups'));
    }

    /**
     * Store the group that a user has joined in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function join(Request $request)
    {
        $request->validate([
            'group_id' => 'required',
        ]);

        $group = Group::find($request->get('group_id'));
        $group->joinedUsers()->attach(auth()->id());

        return redirect('groups/joined')->with('success', 'You joined the group!!');
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('groups.create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)

    {
        $request->validate([
            'group_title' => 'required',
            'group_description' => 'required',
            'group_date' => 'required',
            'group_time' => 'required',
        ]);

        $group = new Group([
            'group_title' => $request->get('group_title'),
            'group_description' => $request->get('group_description'),
            'group_date' => $request->get('group_date'),
            'group_time' => $request->get('group_time'),
        ]);
        $group->save();
        return redirect('/groups')->with('success', 'Group saved!!');
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        // $group = Group::find($id);
        $group = Group::with('createdByUser')->where('id', $id)->first();
        return view('groups.show', compact('group'));
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        $group = Group::find($id);
        return view('groups.edit', compact('group'));
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $request->validate([
            'group_title' => 'required',
            'group_description' => 'required',
            'group_date' => 'required',
            'group_time' => 'required',
        ]);

        $group = Group::find($id);
        $group->group_title =  $request->get('group_title');
        $group->group_description = $request->get('group_description');
        $group->group_date = $request->get('group_date');
        $group->group_time = $request->get('group_time');
        $group->save();
        return redirect('/groups')->with('success', 'Group updated!');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        $group = Group::find($id);
        $group->delete();
        return redirect('/groups')->with('success', 'Group deleted!');
    }
}

Answer 1

在你的刀片中你可以这样使用..

@if(Auth::user()=='')
///your join/green button
@else
//your red /unjoin button
@endif

试试这个，让我知道那里发生了什么 要留在显示页面上，请从以下代码中替换您的控制器代码

public function destroy($id)
    {
        $group = Group::find($id);
        $group->delete();
        return back();
    }

而且最好在删除之前进行确认，如下所示，您可以使用

<form action="{{ route('groups.destroy', $group->id)}}" method="post">
@csrf
@method('DELETE')
<button class="btn btn-sm btn-danger" type="submit" onclick="return confirm('Are you sure you want to delete?')">Delete</button>
</form>